must use overflow-x:clip (not overflow:hidden); a hidden/auto/scroll ancestor becomes a scroll container and stops sticky from engaging against the page scroll. */ .overflow-x-clip { overflow-x: clip; overflow-y: visible; } @media (min-width: 992px) { .hero-sticky { position: sticky; top: 1.5rem; align-self: flex-start; /* take natural height so it can travel within the row */ } } /* ============================================================================ Landing-page long-form content section (landing-content.php) ========================================================================== */ .lc-section { border-top: 1px solid #e6eef5; } .lc-block { margin-bottom: 2.75rem; } .lc-block:last-child { margin-bottom: 0; } .lc-h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); line-height: 1.2; color: var(--ctq-blue); font-weight: 600; margin: 0 0 1rem; } .lc-h3 { font-size: 1.15rem; line-height: 1.3; color: var(--ctq-blue); font-weight: 600; margin: 0; } .lc-body { font-size: 1.0625rem; line-height: 1.7; color: var(--ctq-ink); margin: 0 0 1rem; } .lc-body:last-child { margin-bottom: 0; } .lc-note { font-size: .85rem; line-height: 1.5; color: #64748b; margin: 0 0 .8rem; } /* ── Tables ── */ .lc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d6e8f5; border-radius: 14px; margin: 0; } .lc-table { width: 100%; border-collapse: collapse; font-size: .975rem; } .lc-table--wide { min-width: 44rem; /* force horizontal scroll on small screens */ } .lc-table thead th { background: var(--ctq-blue); color: var(--ctq-white); font-weight: 600; text-align: left; padding: .75rem .9rem; white-space: nowrap; } .lc-table tbody th, .lc-table tbody td { padding: .7rem .9rem; text-align: left; vertical-align: top; line-height: 1.5; border-top: 1px solid #e2ecf5; } .lc-table tbody th[scope="row"] { font-weight: 600; color: var(--ctq-ink); } .lc-table tbody td { color: #33424c; } .lc-table tbody tr:nth-child(even) { background: #f4f8fc; } /* ── Accordion (cost breakdown; shares the FAQ look) ── */ .lc-accordion { background: var(--ctq-white); border: 1px solid #d6e8f5; border-radius: 14px; margin: 1.25rem 0 0; overflow: hidden; } .lc-accordion-summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.2rem; position: relative; display: block; } .lc-accordion-summary::-webkit-details-marker { display: none; } .lc-accordion-summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--ctq-accent); } .lc-accordion[open] > .lc-accordion-summary::after { content: "\2212"; } .lc-accordion-summary:focus-visible { outline: 2px solid var(--ctq-accent); outline-offset: -2px; border-radius: 6px; } .lc-accordion-body { padding: 0 1.2rem 1.2rem; } /* ── Callout / highlight note (e.g. driveways resin bound vs bonded) ── */ .lc-callout { background: #fff6ec; border: 1px solid var(--ctq-accent-light); border-left: 4px solid var(--ctq-accent); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1.25rem 0 0; } .lc-callout-title { font-weight: 700; color: var(--ctq-ink); margin: 0 0 .4rem; line-height: 1.3; } .lc-callout-body { margin: 0; color: #4a3b2c; font-size: .98rem; line-height: 1.6; } /* ── Before-you-book tips ── */ .lc-tips { list-style: none; padding: 0; margin: 0; } .lc-tips li { position: relative; padding-left: 1.85rem; margin-bottom: .9rem; line-height: 1.65; color: var(--ctq-ink); } .lc-tips li:last-child { margin-bottom: 0; } .lc-tips li::before { content: "\2713"; /* check mark */ position: absolute; left: 0; top: .05em; font-weight: 700; color: var(--ctq-accent); } .lc-tips li strong { color: var(--ctq-blue); } /* ── FAQ accordion (full-width variant of the hero-faq pattern) ── */ .lc-faq-item { background: var(--ctq-white); border: 1px solid #d6e8f5; border-radius: 14px; margin-bottom: .6rem; padding: 0 1.1rem; } .lc-faq-q { list-style: none; cursor: pointer; font-weight: 600; color: var(--ctq-blue); padding: .95rem 1.8rem .95rem 0; position: relative; display: block; } .lc-faq-q::-webkit-details-marker { display: none; } .lc-faq-q::after { content: "+"; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: var(--ctq-accent); } .lc-faq-item[open] .lc-faq-q::after { content: "\2212"; } .lc-faq-q:focus-visible { outline: 2px solid var(--ctq-accent); outline-offset: 2px; border-radius: 6px; } .lc-faq-a { padding: 0 0 .95rem; color: #33424c; line-height: 1.6; } /* ── Closing CTA ── */ .lc-cta-wrap { margin-top: 1.4rem; } .marquee-item { flex: 0 0 auto; width: 160px; height: 99px; display: flex; align-items: center; justify-content: center; } .marquee-item img { max-width: 100%; height: 100%; object-fit: contain; } .partners-powered-by { font-size: .85rem; opacity: .7; margin-bottom: .25rem; } /* ── Reviews Marquee ──────────────────────────────────────────── */ .reviews-marquee-section { overflow: hidden; padding: 3rem 0; background: #f6f6f6; } /* Override the old logo item sizing for review cards */ .marquee-review-card { flex: 0 0 auto; width: 260px; background: var(--ctq-white); border-radius: 16px; padding: 1.1rem 1.25rem; box-shadow: 0 2px 12px rgba(8, 39, 59, .06); display: flex; flex-direction: column; gap: .45rem; } .marquee-review-stars { display: flex; align-items: center; gap: 2px; } .marquee-review-stars .star-empty { opacity: .25; } .marquee-review-text { font-size: .82rem; color: var(--ctq-ink); line-height: 1.5; margin: 0; /* Clamp long reviews to 3 lines */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .marquee-review-name { font-size: .75rem; font-weight: 700; color: var(--ctq-accent); margin: 0; } /*COLOURS*/ .text-bold{ font-family: 'Europa', sans-serif; } .text-white svg, .text-white path{ fill: var(--ctq-white); } .text-green{ color: rgba(26, 198, 83 ,1); } .text-green svg, .text-green path{ fill: rgba(26, 198, 83 ,1); } .text-red{ color: var(--ctq-red); } .text-red svg, .text-red path{ fill: var(--ctq-red); } .text-yellow{ color: rgba(251,254,0,1); } .text-yellow svg, .text-yellow path{ fill: rgba(251,254,0,1); } .text-dark{ color: rgba(78,101,96,1); } .text-blue{ color: var(--ctq-blue); } .text-blue svg, .text-blue path{ fill: var(--ctq-blue); } /* Hero titles use the brand red (wins over .text-blue where both are present) */ .hero-title, .hero-title.text-blue{ color: var(--ctq-red); } .hero-title svg, .hero-title path{ fill: var(--ctq-red); } .text-orange{ color: var(--ctq-accent); } .text-orange svg, .text-orange path{ fill: var(--ctq-accent); } .border-green{ border: 2px solid rgba(26, 198, 83 ,1) !important; } .border-red{ border: 3px solid var(--ctq-red) !important; } .border-blue{ border: 3px solid var(--ctq-blue) !important; } /*Backgrounds*/ .form-card{ background-color:rgba(1,13,31,0.8); border:3px solid var(--ctq-white); } .mask-section{ position: absolute; bottom: 0; width:100%; } .bg-footer{ background: #f6f6f6; } .bg-red{ background: var(--ctq-red); } .bg-white{ background: var(--ctq-white); } .bg-blue{ background: var(--ctq-blue); } .bg-dark-blue{ background:var(--ctq-ink); } /* Footer links — white on the dark footer */ .bg-dark-blue a, .bg-dark-blue a:hover{ color: var(--ctq-white); } .bg-green{ background: rgba(26, 198, 83 ,1); } .hr-blue { border-top: 1px solid var(--ctq-blue); } .hr-light { border-top: 1px solid rgba(201,201,201,1); } /*Styled Lists */ .star-tick-list-white li{ display: block; list-style-type: none; line-height: 36px; } .star-tick-list-white li:before { position: relative; content:""; background: url(../icons/star-tick-white.svg) no-repeat left center; padding-right: 24px; margin-right: 10px; margin-left:-34px; } .star-tick-list-green li{ display: block; list-style-type: none; line-height: 36px; } .star-tick-list-green li:before { position: relative; content:""; background: url(../icons/star-tick-green.svg) no-repeat left center; padding-right: 24px; margin-right: 10px; margin-left:-34px; } .question-mark-list-blue li{ display: block; list-style-type: none; line-height: 36px; } .question-mark-list-blue li:before { position: relative; content:""; background: url(../icons/question-mark-blue.svg) no-repeat left center; padding-right: 24px; margin-right: 10px; margin-left:-34px; } /*FORMS*/ .banner-form input, .banner-form select, .banner-form button, .banner-form .input-group-text, .banner-form .custom-file-label, .banner-form .custom-file-label::after, .btn{ border: 3px solid var(--ctq-white) ; border-radius: 10px ; padding: 15px 20px; font-size:18px; } .input-group>.input-group-prepend>.input-group-text{ border-radius: 10px ; } .banner-form .input-group-text, .banner-form .custom-file-label::after { color: var(--ctq-white); background-color: rgba(255,255,255,0.7); fill: var(--ctq-white); } /*.banner-form .input-group-text { border: 1px solid var(--ctq-red); }*/ /*.banner-form .input-group>.custom-select:nth-child(2), .banner-form .input-group>.form-control:nth-child(2) { border-left:1px solid var(--ctq-red); }*/ .banner-form .input-group-text{ background: var(--ctq-accent); border-radius: 10px ; } .banner-form .input-group-text svg{ fill: var(--ctq-white); } .webo-email-error svg, .webo-phone-error svg{ fill: #e53935 !important; } .webo-email-success svg, .webo-phone-success svg{ fill: #7cb342 !important; } /* ── Form Step Progress Bar ─────────────────────────────────── */ .webo-progress-wrap { padding: 1.25rem 1.5rem .75rem; border-bottom: 1px solid #eef0f2; background: #f5f8ff; border-radius: 22px 22px 0 0; } .webo-progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; } /* "Start over" control — resets to step 1 on a clean lead (see controller). */ .webo-restart { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .55rem; padding: 0; background: none; border: 0; font-size: .78rem; font-weight: 600; color: #8a9baa; cursor: pointer; transition: color .15s ease; } .webo-restart:hover, .webo-restart:focus-visible { color: var(--ctq-accent); } .webo-restart svg { width: 14px; height: 14px; } .webo-progress-step-label { font-size: .78rem; font-weight: 700; color: var(--ctq-accent); text-transform: uppercase; letter-spacing: .05em; } .webo-progress-fraction { font-size: .75rem; font-weight: 600; color: #8a9baa; } .webo-progress-track { position: relative; height: 6px; background: #dce8f0; border-radius: 99px; overflow: hidden; margin-bottom: .85rem; } .webo-progress-fill { height: 100%; background: var(--ctq-cta-orange); border-radius: 99px; transition: width .5s cubic-bezier(.4, 0, .2, 1); } /* Step dots row */ .webo-progress-dots { display: flex; justify-content: space-between; align-items: center; gap: 4px; } .webo-progress-dot { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; } .webo-progress-dot-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #dce8f0; background: var(--ctq-white); display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: #aabbc8; transition: all .35s ease; flex-shrink: 0; } .webo-progress-dot-circle.is-done { background: var(--ctq-accent); border-color: var(--ctq-accent); color: var(--ctq-white); } .webo-progress-dot-circle.is-active { background: var(--ctq-white); border-color: var(--ctq-accent); color: var(--ctq-accent); box-shadow: 0 0 0 3px rgba(251,146,60,.25); } .webo-progress-dot-name { font-size: .6rem; font-weight: 600; color: #aabbc8; text-align: center; white-space: nowrap; transition: color .35s ease; display: none; /* shown on lg+ via media query */ } .webo-progress-dot.is-active .webo-progress-dot-name, .webo-progress-dot.is-done .webo-progress-dot-name { color: var(--ctq-accent); } @media (min-width: 480px) { .webo-progress-dot-name { display: block; } } @media (max-width: 479px) { .webo-progress-dot-circle { width: 18px; height: 18px; font-size: .55rem; } } /*BUTONS*/ .btn-cta{ color:var(--ctq-ink); background-color:var(--ctq-white); border:3px solid var(--ctq-white) !important; -webkit-transition : all 500ms ease-out; -moz-transition : all 500ms ease-out; -o-transition : all 500ms ease-out; transition : all 500ms ease-out; border-radius: 10px; font-weight: 400; } .btn-cta p{ color:var(--ctq-ink); } .btn-cta svg, .btn-cta path, .btn-cta rect{ fill: rgba(26, 198, 83,1); } .btn-cta:hover, .cta .btn:hover, .btn-cta-active{ color:var(--ctq-white); background-color:rgba(26, 198, 83,1) !important; border-color:var(--ctq-white) } .btn-cta:hover p, .cta .btn:hover p, .btn-cta-active p{ color:var(--ctq-white); } .btn-cta:hover svg, .btn-cta:hover path, .btn-cta:hover rect, .cta .btn:hover svg, .cta .btn:hover path, .cta .btn:hover rect, .btn-cta-active svg, .btn-cta-active path, .btn-cta-active rect{ fill: var(--ctq-white); } .btn-cta:focus, .btn-cta.focus, .cta .btn:focus, .cta .btn.focus{ box-shadow:0 0 0 .2rem rgba(0,128,128,0.5) } .btn-cta.disabled, .btn-cta:disabled, .cta .btn.disabled, .cta .btn:disabled{ color:var(--ctq-white); background-color:rgba(26, 198, 83 ,0.2); border-color:rgba(0,35,125,0.2) } .btn-cta:not(:disabled):not(.disabled):active, .btn-cta:not(:disabled):not(.disabled).active, .show>.btn-cta.dropdown-toggle, .cta .btn:not(:disabled):not(.disabled):active, .cta .btn:not(:disabled):not(.disabled).active, .show>.cta .btn.dropdown-toggle{ color:var(--ctq-white); background-color:#00b3b3; border-color:var(--ctq-black) } .btn-cta:not(:disabled):not(.disabled):active:focus, .btn-cta:not(:disabled):not(.disabled).active:focus, .show>.btn-cta.dropdown-toggle:focus, .cta .btn:not(:disabled):not(.disabled):active:focus, .cta .btn:not(:disabled):not(.disabled).active:focus, .show>.cta .btn.dropdown-toggle:focus{ box-shadow:0 0 0 .2rem rgba(0,90,90,0.5) } .btn-yes{ color:var(--ctq-white); background-color: rgba(141,206,70,1); border: none; -webkit-transition : all 500ms ease-out; -moz-transition : all 500ms ease-out; -o-transition : all 500ms ease-out; transition : all 500ms ease-out; border-radius: 10px; font-weight: bold; } .btn-yes:hover, .yes .btn:hover{ color:var(--ctq-white); background-color:rgba(3,241,187,1); border-color:rgba(3,241,187,1) } .btn-yes:focus, .btn-yes.focus, .yes .btn:focus, .yes .btn.focus{ box-shadow:0 0 0 .2rem rgba(0,128,128,0.5) } .btn-yes.disabled, .btn-yes:disabled, .yes .btn.disabled, .yes .btn:disabled{ color:var(--ctq-white); background-color:rgba(141,206,70,0.2); border-color:rgba(0,35,125,0.2) } .btn-yes:not(:disabled):not(.disabled):active, .btn-yes:not(:disabled):not(.disabled).active, .show>.btn-yes.dropdown-toggle, .yes .btn:not(:disabled):not(.disabled):active, .yes .btn:not(:disabled):not(.disabled).active, .show>.yes .btn.dropdown-toggle{ color:var(--ctq-white); background-color:#00b3b3; border-color:var(--ctq-black) } .btn-yes:not(:disabled):not(.disabled):active:focus, .btn-yes:not(:disabled):not(.disabled).active:focus, .show>.btn-yes.dropdown-toggle:focus, .yes .btn:not(:disabled):not(.disabled):active:focus, .yes .btn:not(:disabled):not(.disabled).active:focus, .show>.yes .btn.dropdown-toggle:focus{ box-shadow:0 0 0 .2rem rgba(0,90,90,0.5) } .btn-white{ color:rgba(26, 198, 83 ,1); background-color: var(--ctq-white); border: none; -webkit-transition : all 500ms ease-out; -moz-transition : all 500ms ease-out; -o-transition : all 500ms ease-out; transition : all 500ms ease-out; border-radius: 10px; font-weight: bold; } .btn-white:hover{ color:rgba(26, 198, 83 ,1); background-color:rgba(3,241,187,1); border-color:var(--ctq-white) } .btn-white:focus, .btn-white.focus{ box-shadow:0 0 0 .2rem rgba(0,128,128,0.5) } .btn-red{ color:var(--ctq-white); background: var(--ctq-cta-red); border: none; -webkit-transition : all 500ms ease-out; -moz-transition : all 500ms ease-out; -o-transition : all 500ms ease-out; transition : all 500ms ease-out; border-radius: 10px; font-weight: bold; } .btn-red:hover{ color:var(--ctq-white); background:var(--ctq-cta-red-hover); border-color:var(--ctq-white) } .btn-red:focus, .btn-red.focus{ box-shadow:0 0 0 .2rem rgba(0,128,128,0.5) } .btn-green{ color:var(--ctq-white); background-color: rgba(105,183,46,1); -webkit-transition : all 500ms ease-out; -moz-transition : all 500ms ease-out; -o-transition : all 500ms ease-out; transition : all 500ms ease-out; border-radius: 10px; font-weight: bold; } .btn-green:hover{ color:var(--ctq-white); background-color:rgba(105,183,46,0.5); border-color:var(--ctq-white) } .btn-green:focus, .btn-green.focus{ box-shadow:0 0 0 .2rem rgba(0,128,128,0.5) } .btn-blue{ color: var(--ctq-white); background: var(--ctq-cta-blue); -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; border-radius: 10px; font-weight: bold; } .btn-blue:hover{ color: var(--ctq-white); background: var(--ctq-cta-blue-hover); border-color: var(--ctq-white); } .btn-blue:focus, .btn-blue.focus{ box-shadow: 0 0 0 .2rem rgba(0,35,125,0.5); } .btn:disabled, fieldset:disabled .btn { pointer-events: none; color: rgba(255,255,255,0.5); background: linear-gradient(45deg, var(--ctq-accent), var(--ctq-accent-light)); -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; border-radius: 10px; font-weight: bold; } /* ── Trust Bar ────────────────────────────────────────────────── */ .ae-trust-bar { background: #f5f8ff; border-bottom: 1px solid #acdaf6; padding: .4rem 0; font-size: .82rem; } .ae-trust-stars { display: inline-flex; align-items: center; gap: 2px; } .ae-trust-text { color: var(--ctq-ink); } /* ── Navbar ───────────────────────────────────────────────────── */ .ae-navbar { background: var(--ctq-white); border-bottom: 1px solid #eef0f2; padding: .75rem 0; box-shadow: 0 2px 12px rgba(8,39,59,.06); } .ae-navbar .nav-link { font-weight: 600; font-size: .95rem; color: #5a6a74; padding: .4rem .75rem; border-radius: 8px; transition: color .2s ease, background .2s ease; } .ae-navbar .nav-link:hover, .ae-navbar .nav-link.active { color: var(--ctq-ink); background: #f0f7fb; } .ae-navbar .nav-link.active { color: var(--ctq-ink); } /* Dropdown */ .ae-dropdown { border: none; border-radius: 16px; box-shadow: 0 8px 32px rgba(8,39,59,.12); padding: .5rem; min-width: 220px; } .ae-dropdown .dropdown-item { border-radius: 10px; font-size: .9rem; font-weight: 500; padding: .55rem 1rem; color: var(--ctq-ink); transition: background .15s ease; } .ae-dropdown .dropdown-item:hover, .ae-dropdown .dropdown-item.active { background: #f0f7fb; color: var(--ctq-accent); } /* Navbar CTA */ .ae-nav-cta { background: var(--ctq-cta-red); color: var(--ctq-white) !important; border: none; border-radius: 50px !important; padding: .65rem 1.4rem; font-size: .9rem; font-weight: 700; transition: background .2s ease, transform .15s ease; white-space: nowrap; } .ae-nav-cta:hover { background: var(--ctq-cta-red-hover); transform: translateY(-1px); } /* Mobile CTA */ @media (max-width: 991px) { .ae-nav-cta-mobile { display: block; margin-top: .75rem; text-align: center; background: rgba(26, 198, 83, 1); color: var(--ctq-white); border-radius: 50px; padding: .75rem 1.5rem; font-weight: 700; text-decoration: none; } } /* ── Hero Search Form ─────────────────────────────────────────── */ .ae-hero-form-wrap { max-width: 540px; } .ae-search-pill { display: flex; align-items: center; background: var(--ctq-white); border: 2px solid #acdaf6; border-radius: 50px; padding: .35rem .35rem .35rem 1rem; /*box-shadow: 0 4px 20px rgba(8,39,59,.08);*/ gap: .5rem; transition: border-color .2s ease, box-shadow .2s ease; } .ae-search-pill:focus-within { border-color: var(--ctq-accent); box-shadow: 0 4px 20px rgba(251,146,60,.18); } .ae-search-icon { color: #aabbc8; flex-shrink: 0; display: flex; align-items: center; } .ae-search-select { flex: 1; border: none; outline: none; background: transparent; font-family: 'Europa', sans-serif; font-size: .95rem; font-weight: 500; color: var(--ctq-ink); padding: .45rem 0; cursor: pointer; -webkit-appearance: none; appearance: none; min-width: 0; /* flex shrink fix */ } .ae-search-select option[value=""][disabled] { color: #aabbc8; } /* The Next button — pill shaped, sits inside the outer pill */ .ae-search-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--ctq-cta-red); color: var(--ctq-white); border: none; border-radius: 50px; padding: .65rem 1.25rem; font-family: 'Europa', sans-serif; font-size: .9rem; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background .2s ease, transform .15s ease; white-space: nowrap; } .ae-search-btn:hover { background: var(--ctq-cta-red-hover); transform: translateX(2px); } /* Trust line below form */ .ae-hero-trust { font-size: .85rem; font-weight: 500; color: #5a6a74; align-items: center; gap: .5rem; } .ae-hero-trust .ae-trust-stars { font-size: 1rem; } @media (max-width: 480px) { .ae-search-pill { padding: .3rem .3rem .3rem .85rem; } .ae-search-btn { padding: .6rem 1rem; font-size: .82rem; } .ae-search-select { font-size: .85rem; } } /* ── Job Option Buttons (≤6 items) ───────────────────────────── */ .job-option-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; margin-bottom: 10px; background: var(--ctq-white); border: 2px solid rgba(255,255,255,0.6); border-radius: 50px; font-size: 16px; font-weight: 600; color: var(--ctq-ink); cursor: pointer; transition: all 0.25s ease; text-align: left; } .job-option-btn:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); } .job-option-btn.is-selected { background: rgba(225, 255, 214, 1); border-color: rgba(111, 209, 78, 1); } .job-option-btn .job-option-icon { width: 24px; height: 24px; flex-shrink: 0; opacity: 0; transition: opacity 0.2s ease; } .job-option-btn.is-selected .job-option-icon { opacity: 1; } /* Auto-advance: the tapped card shows a spinner (in place of the tick) while its step saves in the background — set by the controller's setPending(). */ .job-option-btn { position: relative; } .job-option-btn.is-loading .job-option-icon { opacity: 0; } .job-option-btn.is-loading::after { content: ""; position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; margin-top: -10px; border: 2px solid rgba(111, 209, 78, 0.3); border-top-color: rgba(111, 209, 78, 1); border-radius: 50%; animation: webo-card-spin 0.6s linear infinite; } @keyframes webo-card-spin { to { transform: rotate(360deg); } } /*carousels*/ .carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; justify-content: right; padding: 0; list-style: none; margin-right:0; } .carousel-control-next, .carousel-control-prev { position: absolute; top: 10px; bottom: auto; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #c7d1d3; text-align: center; background: 0 0; border: 0; opacity: .5; transition: opacity .15s ease; } .carousel-indicators [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: 10px; height: 10px; padding: 0; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: #c7d1d3; background-clip: padding-box; border: 0; border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-radius: 6px; opacity: .5; transition: opacity .6s ease; } .carousel-indicators .active { opacity: 1 !important; background-color: var(--ctq-black) !important; } .carousel-dark .carousel-control-next, .carousel-dark .carousel-control-prev { filter: none; opacity: 1; } .carousel-control-next-icon{ position: relative; content:""; background: url(../icons/icon-next.svg) no-repeat left center; } .carousel-control-prev-icon{ position: relative; content:""; background: url(../icons/icon-prev.svg) no-repeat left center; } /* ── Review card text clamp ─────────────────────────────────── */ .review-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .review-text.is-clamped.is-expanded { display: block; overflow: visible; -webkit-line-clamp: unset; } .review-read-more { background: none; border: none; padding: 0; margin-top: .4rem; font-size: .85rem; font-weight: 600; color: rgba(26, 198, 83, 1); cursor: pointer; text-decoration: underline; display: inline-block; } .review-read-more:hover { color: rgba(26, 198, 83, 0.75); } /* ── Coverage / Map Section ───────────────────────────────────── */ .ae-coverage-section { padding: 5rem 0; background: var(--ctq-white); overflow: hidden; } .ae-coverage-left { padding: 2rem 3rem 2rem 2rem; } /* Postcode pill — inherits .ae-search-pill base styles */ .ae-postcode-pill { max-width: 420px; } .ae-postcode-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Europa', sans-serif; font-size: .95rem; font-weight: 500; color: var(--ctq-ink); padding: .45rem 0; text-transform: uppercase; letter-spacing: .05em; min-width: 0; } .ae-postcode-input::placeholder { color: #aabbc8; text-transform: none; letter-spacing: 0; } /* City list */ .ae-city-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; max-width: 380px; } .ae-city-btn { background: none; border: none; padding: .3rem 0; font-family: 'Europa', sans-serif; font-size: 1rem; font-weight: 700; color: var(--ctq-ink); cursor: pointer; display: flex; align-items: center; gap: .6rem; transition: color .2s ease; } .ae-city-btn:hover { color: var(--ctq-accent); } .ae-city-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ctq-accent); flex-shrink: 0; display: inline-block; } .ae-coverage-note { font-size: .85rem; color: var(--ctq-accent); max-width: 360px; line-height: 1.6; } /* ── Map ──────────────────────────────────────────────────────── */ .ae-coverage-right { padding: 1rem; } .ae-map-img { width: 100%; height: auto; display: block; /*filter: brightness(0) saturate(100%) invert(22%) sepia(62%) saturate(621%) hue-rotate(172deg) brightness(88%) contrast(95%);*/ } .ae-map-wrap { position: relative; width: 100%; max-width: 520px; margin: 0 auto; /*background: #f5f8ff; /* whatever colour you want behind the map */ } /* Target the inlined SVG directly */ .ae-map-wrap > svg { width: 100%; height: auto; display: block; } /* Remove any background rect inside the SVG */ .ae-map-wrap > svg rect:first-child { display: none; } /* Map path colours are set in the SVG file itself */ .ae-map-pins { position: absolute; inset: 0; pointer-events: none; } /* ── Individual pin label ─────────────────────────────────────── */ .ae-map-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; /* Animation states */ opacity: 0; animation: pin-pop 4.5s ease forwards; } .ae-map-pin-label { background: var(--ctq-white); border-radius: 20px; padding: .35rem .85rem; font-family: 'Europa', sans-serif; font-size: .72rem; font-weight: 700; color: var(--ctq-ink); white-space: nowrap; box-shadow: 0 4px 16px rgba(8, 39, 59, .15); } .ae-map-pin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ctq-accent); box-shadow: 0 0 0 3px rgba(251,146,60,.25); } @keyframes pin-pop { 0% { opacity: 0; transform: translate(-50%, -110%); } 12% { opacity: 1; transform: translate(-50%, -100%); } 75% { opacity: 1; transform: translate(-50%, -100%); } 100% { opacity: 0; transform: translate(-50%, -100%); } } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 991px) { .ae-coverage-left { padding: 2rem 1.5rem; } .ae-coverage-right { margin-top: 2rem; } .ae-map-wrap { max-width: 360px; } .ae-map-pin-label { font-size: .65rem; padding: .28rem .65rem; } } @media (max-width: 575px) { .ae-city-list { grid-template-columns: 1fr 1fr; gap: .4rem 1rem; } } /* "How it works" steps: the decorative right-hand image only appears at xxl (≥1400px). Below that it's hidden, which left the empty second column holding the right half open (a gap). Collapse that column and centre the content so the block reads as intentional at laptop/tablet sizes. Scoped to the align-items-stretch row so the "Why use us" centred rows are untouched. */ @media (max-width: 1399.98px) { #how-it-works .row.align-items-stretch > .col-lg-6:last-child { display: none; } #how-it-works .row.align-items-stretch > .col-lg-6:first-child, #how-it-works .row > .col-lg-9.text-start { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; } } /* ── Cookie Consent Overlay ──────────────────────────────────── */ #bbp-cookie-overlay { position: fixed; inset: 0; background: rgba(8, 39, 59, 0.75); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 9998; } /* ── Cookie Consent Modal ────────────────────────────────────── */ .bbp-cookie-banner { position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); z-index: 9999; background: var(--ctq-white); border-radius: 25px; padding: 2.5rem; max-width: 560px; width: calc(100% - 2rem); box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 1rem; } .bbp-cookie-logo { margin-bottom: .5rem; } .bbp-cookie-title { font-size: 1.4rem; font-weight: 700; color: var(--ctq-ink); margin: 0; } .bbp-cookie-text { color: var(--ctq-ink); font-size: .9rem; margin: 0; line-height: 1.6; } .bbp-cookie-text a { color: rgba(26, 198, 83, 1); } .bbp-cookie-actions { display: flex; gap: .75rem; margin-top: .5rem; } .bbp-cookie-btn { flex: 1; padding: .85rem 1rem; border-radius: 10px; font-size: .95rem; font-weight: 600; cursor: pointer; border: 2px solid rgba(26, 198, 83, 1); transition: all .2s ease; text-align: center; } .bbp-cookie-btn--primary { background: rgba(26, 198, 83, 1); color: var(--ctq-white); } .bbp-cookie-btn--primary:hover { background: rgba(26, 198, 83, .85); } .bbp-cookie-btn--secondary { background: transparent; color: rgba(26, 198, 83, 1); } .bbp-cookie-btn--secondary:hover { background: rgba(26, 198, 83, .1); } /*404 page*/ .ae-404-section { min-height: 50vh; display: flex; align-items: center; } .ae-404-code { font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; line-height: 1; margin-bottom: 1rem; opacity: 0.15; } @media (max-width: 480px) { .bbp-cookie-banner { padding: 1.75rem; } .bbp-cookie-actions { flex-direction: column; } } @media (min-width: 992px) { .hero-title{ font-size: 72px; line-height: 72px; } .md-hero-title{ font-size: 36px; line-height: 36px; } .sml-hero-title{ font-size: 24px; } } @media (min-width: 769px) { .bg-form-cert{ position: absolute; right: -93px; top: 20px; } .bg-form-cert-letter{ display: block; font-weight: bold; border: 2px solid var(--ctq-white); color: var(--ctq-white); margin-bottom: 2px; text-align: right; padding: 5px; } .bg-a{ width: 35px; background: #008054; } .bg-b{ width: 45px; background: #19b459; } .bg-c{ width: 55px; background: #8dce46; } .bg-d{ width: 65px; background: #ffd500; } .bg-e{ width: 75px; background: #fcaa65; } .bg-f{ width: 85px; background: #ef8023; } .bg-g{ width: 95px; background: #e9153b; } } @media (max-width: 991px) and (min-width: 769px) { .hero-title{ font-size: 60px; line-height: 60px; } .md-hero-title{ font-size: 24px; line-height: 24px; } .sml-hero-title{ font-size: 18px; } } @media (max-width: 769px) { .bg-form-cert-letter{ display: block; font-weight: bold; border: 2px solid var(--ctq-white); color: var(--ctq-white); margin-bottom: 2px; text-align: center; padding: 5px; } .bg-a{ width: 12%; height: 55px; background: #008054; left: 5%; position: absolute; bottom: -55px; } .bg-b{ width: 12%; height: 65px; background: #19b459; left: 18%; position: absolute; bottom: -65px; padding-top: 15px; } .bg-c{ width: 12%; height: 75px; background: #8dce46; left: 31%; position: absolute; bottom: -75px; padding-top: 25px; } .bg-d{ width: 12%; height: 85px; background: #ffd500; left: 44%; position: absolute; bottom: -85px; padding-top: 35px; } .bg-e{ width: 12%; height: 95px; background: #fcaa65; left: 57%; position: absolute; bottom: -95px; padding-top: 45px; } .bg-f{ width: 12%; height: 105px; background: #ef8023; left: 70%; position: absolute; bottom: -105px; padding-top: 55px; } .bg-g{ width: 12%; height: 115px; background: #e9153b; left: 83%; position: absolute; bottom: -115px; padding-top: 65px; } } /* ======================================================================== Multi-step form rebuild — focus states, inline validation, honeypot, step transition. Appended so source order lets these win over the base .banner-form / .job-option-btn rules above. ======================================================================== */ /* Keyboard focus for the tappable option cards (previously missing) */ .job-option-btn:focus-visible { outline: 3px solid var(--ctq-accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.35); } /* Keyboard focus for the primary CTA and the retry button on the blue card */ .ae-nav-cta:focus-visible, .webo-retry-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } /* Inline, field-level validation messages (replaces the generic top banner). Light red keeps them legible on the dark-blue form card. */ .webo-field-error, #job-notice, #start-time-notice, #budget-notice, #job-description-notice { color: #ffc2c2; font-size: 0.8rem; font-weight: 600; margin-top: 0.35rem; } .webo-field-error { /* wrap below the input inside a flex .input-group */ flex-basis: 100%; width: 100%; } .banner-form .is-invalid, .banner-form input.is-invalid, .banner-form textarea.is-invalid { border-color: #ff6b6b !important; box-shadow: 0 0 0 0.15rem rgba(255, 107, 107, 0.35) !important; } /* Quiet, non-blocking retry, surfaced only on a genuine save failure */ .webo-retry-text { color: #ffffff; } .webo-retry-btn { display: inline-block; margin-left: 0.5rem; padding: 0.25rem 0.9rem; border: 2px solid #ffffff; border-radius: 50px; background: transparent; color: #ffffff; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .webo-retry-btn:hover { background: rgba(255, 255, 255, 0.15); } /* Description example hint */ .webo-example-hint { color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; } /* Honeypot: kept off-screen rather than display:none so form-filling bots still populate it (real users never see or tab to it). */ .webo-hp-wrap { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Subtle step-in transition (disabled under reduced-motion) */ .card-body[id^="webo-form-step-"]:not(.d-none), #webo-form-success:not(.d-none) { animation: weboStepIn 0.25s ease both; } @keyframes weboStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .card-body[id^="webo-form-step-"]:not(.d-none), #webo-form-success:not(.d-none) { animation: none; } .webo-progress-fill { transition: none; } } /* Per-step submission status (gated advance: pending / 4xx error / retry) */ .webo-step-pending { display: inline-block; color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.25rem; } .webo-step-pending::after { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.5em; vertical-align: -0.1em; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #ffffff; border-radius: 50%; animation: weboSpin 0.6s linear infinite; } @keyframes weboSpin { to { transform: rotate(360deg); } } .webo-step-alert { color: #ffc2c2; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.25rem; } @media (prefers-reduced-motion: reduce) { .webo-step-pending::after { animation: none; } } /* Details step: the Email / Phone / Postcode fields are icon+input groups, and Bootstrap squares the input's right edge — round the group's OUTER corners so they match the plain rounded inputs (Name) and the rest of the form. */ .banner-form .input-group > .form-control { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } .banner-form .input-group > .input-group-text:first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }