/* ========================================================================= End of Tenancy PPC hero (.eot-hero) Mirrors the Deep Cleaning LP (.dc-hero) visual language. Fully self-contained so it can be linked from the standalone /end-of-tenancy/ PPC pages without any theme dependency. Scoped under .eot-hero to avoid clashing with the legacy inline PPC CSS already in the template . ========================================================================= */ /* Suppress JS-injected 15% banner — placed manually below the "no card" line */ .eot-form-card .gic-announcement-placeholder { display: none !important; } /* Hero outer wrapper */ .eot-hero { background: #fff; padding: 30px 0 20px; } /* Grid */ .eot-hero-grid { display: grid; grid-template-columns: 1fr 460px; grid-template-rows: auto 1fr; grid-template-areas: "eyebrow form" "body form"; column-gap: 120px; } @media (max-width: 1024px) { .eot-hero-grid { grid-template-columns: 1fr 400px; column-gap: 28px; } } @media (max-width: 768px) { .eot-hero-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "eyebrow" "form" "body"; gap: 0; } .eot-form-card { margin-bottom: 0; } .eot-hero-left { margin-top: 40px; } } /* Grid area assignments */ .eot-eyebrow { grid-area: eyebrow; } .eot-hero-left { grid-area: body; } .eot-form-card { grid-area: form; align-self: start; } /* === Left column === */ .eot-hero .eot-eyebrow { font-size: 20px; font-weight: 700; letter-spacing: 0.06em; color: #469ce2; margin: 0 0 16px; line-height: 1.3; } .eot-hero .eot-h1 { font-size: 28px; font-weight: 800; line-height: 1.12; color: #0f2230; margin: 0 0 16px; } .eot-h1-accent { color: #46bee2; } .eot-hero .eot-sub { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; color: #4a5b6a; margin: 0 0 22px; } /* Scenario cards */ .eot-scenario-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; } @media (max-width: 480px) { .eot-scenario-cards { grid-template-columns: 1fr; } } .eot-scenario-card { background: #f7fbfd; border: 1px solid #d8eef6; border-left: 3px solid #46bee2; border-radius: 10px; padding: 12px 14px; } .eot-scenario-card-header { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; } .eot-scenario-card-icon { font-size: 15px; flex: 0 0 auto; line-height: 1; } .eot-scenario-card-title { font-size: 13px; font-weight: 700; color: #0f2230; line-height: 1.3; } .eot-scenario-card-desc { font-size: 12px; color: #5a6b7a; line-height: 1.4; margin: 0; } /* Trust pills */ .eot-pills { display: flex; flex-wrap: wrap; gap: 8px; } .eot-pill { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; border: 1px solid transparent; } .eot-pill--green { background: #e6f6ec; color: #0a7d3e; border-color: #b9e3c6; } .eot-pill--cyan { background: #e3f5fb; color: #0a7d8e; border-color: #b8e6f1; } .eot-pill--yellow { background: #fff5d6; color: #8a6500; border-color: #f0d97a; } .eot-pill--grey { background: #f4f7fa; color: #2a3a48; border-color: #dce3ea; } /* === Right column — form card === */ .eot-form-card { background: #fff; border: 1px solid #e3e9ee; border-radius: 16px; padding: 28px 24px 16px; box-shadow: 0 12px 40px rgba(0, 30, 50, 0.09); max-width: 460px; margin-left: auto; width: 100%; } .eot-form-card .eot-form-title { font-size: 22px; font-weight: 700; color: #0f2230; margin: 0 0 4px; } .eot-form-card .eot-form-sub { font-size: 13px; color: #5a6b7a; margin: 0 0 14px; line-height: 1.5; } .eot-form-stars { background: #fff5d6; border: 1px solid #f0d97a; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #5a4500; display: flex; align-items: center; gap: 8px; } .eot-stars { color: #f5b400; letter-spacing: 1px; font-size: 14px; white-space: nowrap; } .eot-form-foot { font-size: 12px; color: #8a9aaa; text-align: center; margin: 10px 0 6px; line-height: 1.5; } /* === CFF form reset inside the card (mirrors the deep-cleaning LP) === */ .eot-hero #cp_calculatedfieldsf_pform_1 { padding: 0 !important; max-width: none !important; margin: 0 !important; } .eot-hero #cp_calculatedfieldsf_pform_1 #fbuilder { box-shadow: none !important; -webkit-box-shadow: none !important; background: transparent !important; padding: 0 !important; } .eot-hero #cp_calculatedfieldsf_pform_1 #formheader_1, .eot-hero #cp_calculatedfieldsf_pform_1 #formheader_1 *, .eot-hero #cp_calculatedfieldsf_pform_1 #fieldlist_1 > .fform, .eot-hero #cp_calculatedfieldsf_pform_1 #fieldlist_1 > #field, .eot-hero #cp_calculatedfieldsf_pform_1 #fieldlist_1 > .fform * { display: none !important; } /* Injected field labels */ .eot-hero #cp_calculatedfieldsf_pform_1 .service-select::before, .eot-hero #cp_calculatedfieldsf_pform_1 .service-postcode::before { display: block; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #5a6b7a; text-transform: uppercase; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-select::before { content: "Service needed"; margin: 0 0 4px; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-postcode::before { content: "Your postcode"; margin: 10px 0 4px; } /* Neutralise legacy float/width so the two fields stack full-width in the card */ .eot-hero #cp_calculatedfieldsf_pform_1 .service-select, .eot-hero #cp_calculatedfieldsf_pform_1 .service-postcode { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-select .dfield select, .eot-hero #cp_calculatedfieldsf_pform_1 .service-select-wrap select, .eot-hero #cp_calculatedfieldsf_pform_1 .service-postcode .dfield input { width: 100% !important; max-width: none !important; height: 45px !important; min-height: 45px !important; padding: 0 12px !important; margin: 0 !important; box-sizing: border-box !important; font-size: 20px !important; /* Explicit Oxygen (not `inherit`): form controls resolve `inherit` from the parent's *computed* font at render time, which was intermittently landing on the UA/narrow fallback on some browsers instead of the page's Oxygen. Hardcoding the family makes the inputs deterministic across browsers. */ font-family: "Oxygen", sans-serif !important; font-weight: 400 !important; color: #666 !important; background-color: transparent !important; border: 1px solid #ccc !important; border-radius: 5px !important; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15) !important; outline: none !important; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-select-wrap select { background-color: transparent !important; border: 1px solid #838383 !important; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-postcode .dfield input:focus, .eot-hero #cp_calculatedfieldsf_pform_1 .service-select-wrap select:focus { border-color: #46bee2 !important; background-color: #fff !important; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(70, 190, 226, 0.18) !important; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-select .r, .eot-hero #cp_calculatedfieldsf_pform_1 .service-postcode .r { display: none; } /* Custom dropdown arrow (suppress the legacy bordered triangle box) */ .eot-hero #cp_calculatedfieldsf_pform_1 .service-select-wrap { position: relative; max-width: none !important; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-select-wrap::after { display: none !important; } .eot-hero #cp_calculatedfieldsf_pform_1 .service-select-wrap select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px !important; } /* Submit button */ .eot-hero #cp_calculatedfieldsf_pform_1 .pbSubmit { background: #46bee2 !important; color: #fff !important; border: none !important; /* CFF's stylesheet sets the button to "Open Sans" — a font this page never loads — so it fell back to Arial. Force Oxygen to match the hero + inputs. */ font-family: "Oxygen", sans-serif !important; border-radius: 10px !important; font-size: 19px !important; font-weight: 700 !important; width: 100% !important; padding: 14px 18px !important; margin: 16px 0 0 !important; cursor: pointer; transition: background 0.15s ease; box-shadow: none !important; text-transform: none !important; text-shadow: rgba(0, 0, 0, 0.8) 0 0 3px; } .eot-hero #cp_calculatedfieldsf_pform_1 .pbSubmit:hover { background: #2ba7cf !important; } .eot-hero #cp_calculatedfieldsf_pform_1 .fields { margin-bottom: 0 !important; } /* 15% discount announcement — same visual style as the shared global announcement-step1.css (which only loads on WordPress pages). Duplicated here, scoped to .eot-form-card, so the standalone generated EOT area pages (which don't go through WordPress/wp_footer) still get it styled. */ .eot-form-card .gic-discount-announcement { display: flex; align-items: center; justify-content: flex-start; gap: 10px; background: linear-gradient(135deg, #f8fff8 0%, #eefbee 100%); border: 1px solid rgba(39, 174, 96, 0.2); border-radius: 8px; padding: 8px 10px; margin: 14px 0 6px; } .eot-form-card .gic-discount-announcement .gic-ann-tag { background: rgba(39, 174, 96, 0.15); color: #1a974f; font-size: 16px; font-weight: 900; padding: 4px 10px; border-radius: 4px; white-space: nowrap; } .eot-form-card .gic-discount-announcement .gic-ann-text { font-size: 15px; color: #555; } .eot-form-card .gic-discount-announcement .gic-mobile-text { display: none; } @media (max-width: 767px) { .eot-form-card .gic-discount-announcement .gic-desktop-text { display: none; } .eot-form-card .gic-discount-announcement .gic-mobile-text { display: inline; } } /* Reviews band (Elfsight) - full content width on desktop */ .eot-reviews { width: 100%; max-width: none; margin: 10px 0 0; padding: 8px 25px 0; overflow: visible; } .eot-reviews [class*="elfsight-app-"] { width: 100% !important; max-width: none !important; overflow: visible !important; } .eot-reviews iframe { width: 100% !important; max-width: 100% !important; } /* Keep carousel nav arrows inside the padded band (not clipped at edges) */ .eot-reviews [class*="NavigationButton"], .eot-reviews [class*="navigation-button"], .eot-reviews [class*="CarouselNavigation"], .eot-reviews .swiper-button-prev, .eot-reviews .swiper-button-next { z-index: 2; } .eot-reviews-title { font-size: 22px; font-weight: 800; color: #0f2230; text-align: center; margin: 0 0 14px; line-height: 1.3; } /* What's included (matches main EOT LP .gic-included) */ .gic-included { width: 100%; box-sizing: border-box; font-family: inherit; background: #fff; border: 1px solid #E7EEF8; border-radius: 8px; padding: 13px; box-shadow: 0 0 5px rgba(0,0,0,.17); margin: 28px 0 24px; } .gic-included__header { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .gic-included__titleWrap { min-width: 260px; flex: 1 1 420px; } .gic-included__titleRow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .gic-included__headerIcon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; background: #E9F5FF; color: #0B66C3; font-weight: 800; font-size: 18px; line-height: 1; flex: 0 0 34px; } .gic-included__title { margin: 0; font-size: 18px; line-height: 1.2; color: #0F172A; font-weight: 800; } .gic-included__subtitle { margin: 0; color: #475569; font-size: 14px; line-height: 1.5; } .gic-included__chips { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .gic-included__chip { display: inline-flex; align-items: center; gap: 8px; background: #F1F5F9; color: #0F172A; border: 1px solid #E2E8F0; border-radius: 6px; padding: 8px 12px; font-size: 13px; line-height: 1; white-space: nowrap; } .gic-included__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; } .gic-included__card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid #E7EEF8; border-radius: 6px; background: #FBFDFF; } .gic-included__check { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #E9FBEF; color: #16A34A; font-size: 18px; font-weight: 900; line-height: 1; } .gic-included__check--blue { background: #E9F5FF; color: #0B66C3; } .gic-included__cardTitle { font-weight: 800; color: #0F172A; font-size: 13.5px; line-height: 1.25; } .gic-included__cardText { color: #475569; font-size: 13px; line-height: 1.4; margin-top: 3px; } @media (max-width: 980px) { .gic-included__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gic-included { padding: 12px; margin-top: 20px; } .gic-included__header { flex-direction: column; align-items: stretch; } .gic-included__titleWrap { min-width: 0; flex: 1 1 auto; } .gic-included__chips { justify-content: flex-start; width: 100%; max-width: 100%; } .gic-included__chip { white-space: normal; } .gic-included__grid { grid-template-columns: 1fr; } } /* Photo galleries */ .eot-gallery { margin: 28px 0; } .eot-gallery-title { font-size: 22px; font-weight: 800; color: #0f2230; margin: 0 0 14px; line-height: 1.3; } .eot-gallery-grid { display: grid; gap: 10px; margin: 0 0 28px; } .eot-gallery-grid--action { grid-template-columns: repeat(6, minmax(0, 1fr)); } .eot-gallery-grid--results { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eot-gallery-grid figure { margin: 0; } .eot-gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } .eot-gallery-grid--action img { aspect-ratio: 4 / 3; } .eot-gallery-grid--results img { aspect-ratio: 1 / 1; } @media (max-width: 900px) { .eot-gallery-grid--action { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eot-gallery-grid--results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .eot-gallery-grid--action, .eot-gallery-grid--results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================= PPC page base (hero/content; header/footer use WP theme chrome) ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body.eot-ppc-page { margin: 0; font-family: "Oxygen", sans-serif; font-size: 16px; line-height: 1.7; color: #333; background: #fff; overflow-x: clip; } body.eot-ppc-page img, body.eot-ppc-page video, body.eot-ppc-page iframe { max-width: 100%; } body.eot-ppc-page .entry-content a { color: #1066e8; } body.eot-ppc-page .entry-content a:hover { color: #333; } body.eot-ppc-page .entry-content h1, body.eot-ppc-page .entry-content h2, body.eot-ppc-page .entry-content h3, body.eot-ppc-page .eot-hero h1, body.eot-ppc-page .eot-hero h2, body.eot-ppc-page .eot-hero h3, body.eot-ppc-page .eot-section-title, body.eot-ppc-page .eot-faq__title, body.eot-ppc-page .eot-faq__q { font-family: "Oxygen", sans-serif; color: #0972af; line-height: 1.3; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .skip-link:focus { position: static; width: auto; height: auto; margin: 8px; padding: 8px 12px; background: #46bee2; color: #fff; clip: auto; z-index: 9999; } @media (max-width: 768px) { .eot-form-card { max-width: none; margin-left: 4px; margin-right: 4px; width: calc(100% - 8px); box-shadow: 0 3px 10px rgba(0, 30, 50, 0.045), 0 0 6px rgba(0, 30, 50, 0.03); } .eot-hero { padding-left: 0; padding-right: 0; } } @media (min-width: 769px) { .eot-form-card { margin-right: 6px; width: calc(100% - 6px); box-shadow: 0 6px 20px rgba(0, 30, 50, 0.065), 0 0 10px rgba(0, 30, 50, 0.04); } } /* Content area */ body.eot-ppc-page .inside-article, body.eot-ppc-page .entry-content { padding: 0; overflow-x: clip; } body.eot-ppc-page .eot-hero, body.eot-ppc-page .eot-reviews { overflow: visible; } body.eot-ppc-page .gb-container { max-width: 100%; } body.eot-ppc-page #page.site { overflow-x: clip; } /* +5px horizontal inset on all content bands except the quote form card */ body.eot-ppc-page .eot-hero-grid > :not(.eot-form-card), body.eot-ppc-page .gb-inside-container > :not(.eot-hero):not(.eot-reviews) { padding-left: 5px; padding-right: 5px; box-sizing: border-box; } body.eot-ppc-page .gb-inside-container > .eot-reviews { padding-left: 25px; padding-right: 25px; } /* Synonym strip + geo */ .eot-synonyms { font-size: 14px; color: #5a6b7a; margin: -8px 0 16px; line-height: 1.5; } .eot-geo { font-size: 13px; color: #5a6b7a; margin: 16px 0 0; line-height: 1.5; } /* Body sections */ .eot-intro { font-size: 17px; color: #4a5b6a; margin: 0 0 28px; } .eot-section-title { font-size: 24px; font-weight: 700; color: #0972af; margin: 32px 0 12px; } .eot-gallery-title { font-size: 24px; font-weight: 700; color: #0972af; margin: 28px 0 16px; } .eot-cta { margin: 32px 0 0; padding: 20px; background: #f7fbfd; border: 1px solid #d8eef6; border-radius: 10px; font-size: 17px; text-align: center; } /* FAQ */ .eot-faq { margin: 40px 0 0; padding: 28px 24px; background: #f7fbfd; border: 1px solid #d8eef6; border-radius: 12px; } .eot-faq__title { font-size: 22px; font-weight: 700; color: #0972af; margin: 0 0 20px; } .eot-faq__list { display: flex; flex-direction: column; gap: 16px; } .eot-faq__item { background: #fff; border: 1px solid #e4eef4; border-radius: 8px; padding: 16px 18px; } .eot-faq__q { font-size: 16px; font-weight: 700; color: #0f2230; margin: 0 0 8px; } .eot-faq__a { font-size: 15px; color: #4a5b6a; margin: 0; line-height: 1.6; } /* CFF form helpers */ .onpage-form { margin: 0; } .onpage-form .float-left { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .onpage-form .pbSubmit { float: none !important; margin: 0 !important; } .eot-hero .service-select-wrap { display: block; width: 100%; position: relative; max-width: none !important; } .service-select .r, .service-postcode .r { display: none; } .eot-hero .service-select-wrap::after { display: none !important; } /* ========================================================================= WP area-page hero reuse — scoped to body.eot-wp-hero (prototype) The theme's page-hero title band is disabled at the source via the GeneratePress "Global Page Headers" element exclude rule, so the hero's own eyebrow

is the single page title, matching the generated pages. ========================================================================= */ body.eot-wp-hero .eot-hero { padding-top: 30px; } body.eot-wp-hero .eot-reviews { margin: 44px 0; } /* --- Toned-down selling points so the form CTA stays the focal point --- */ /* Scenario cards: softer surface, mid-weight accent bar */ body.eot-wp-hero .eot-scenario-card { background: #f8fbfd; border: 1px solid #dfeef5; border-left: 3px solid #7fceea; } body.eot-wp-hero .eot-scenario-card-icon { opacity: 0.95; } body.eot-wp-hero .eot-scenario-card-title { color: #1f3446; } /* Trust pills: keep the colour coding, saturation eased to a middle ground */ body.eot-wp-hero .eot-pill { font-weight: 600; } body.eot-wp-hero .eot-pill--green { background: #eaf7ee; color: #24804c; border-color: #c7e8d2; } body.eot-wp-hero .eot-pill--cyan { background: #e8f6fb; color: #247f90; border-color: #c6e8f1; } body.eot-wp-hero .eot-pill--yellow { background: #fef6dd; color: #8a6c1a; border-color: #eed98e; } body.eot-wp-hero .eot-pill--grey { background: #f5f7fa; color: #3a4a58; border-color: #dfe6ec; } /* Form card: a touch more lift so it clearly leads as the main CTA */ body.eot-wp-hero .eot-form-card { box-shadow: 0 16px 46px rgba(0, 30, 50, 0.12); } /* Mobile fix: the "What's included" header goes column-flex on mobile, so the page's inline `flex:1 1 420px` on the title turns its 420px flex-basis into a 420px-tall blank gap. Higher-specificity reset beats the inline rule. */ @media (max-width: 640px) { body.eot-wp-hero .gic-included__titleWrap { flex: 1 1 auto; min-width: 0; } } /* EOT London page: separate "What's included" from the hero so it doesn't compete with the CTA (desktop only; the move-out twin has its lead section). */ @media (min-width: 769px) { body.page-id-22 .gic-included { margin-top: 64px; } } /* Tighten the bottom of the hero form card: the global .onpage-form rule adds a 50px bottom margin, leaving a large blank gap under the 15% OFF banner before the "No card required" line. Collapse it and trim the card footer. */ body.eot-wp-hero .eot-form-card .onpage-form { margin-bottom: 0 !important; } body.eot-wp-hero .eot-form-card .gic-discount-announcement { margin-top: 10px !important; margin-bottom: 6px !important; } body.eot-wp-hero .eot-form-card .eot-form-foot { margin-top: 8px; margin-bottom: 2px; } body.eot-wp-hero .eot-form-card { padding-bottom: 16px; } /* "What's included" box: replace the flat all-around grey glow with a soft, diffuse downward shadow for a more elegant, less distracting card look. */ body.eot-wp-hero .gic-included { box-shadow: 0 10px 30px rgba(15, 34, 48, 0.06) !important; border-color: #eef2f7 !important; }