/* ============================================================================= COMMERCIAL CLEANING — Google Ads landing page Serves /commercial-cleaning and /commercial-cleaning/thank-you Added 2026-08-10. This is a STANDALONE page: it does not load main.min.css, Bootstrap, slick or the icon fonts, so this file must supply its own reset and base typography. Nothing here may leak into the rest of the site — every rule is scoped under the .cc-lp root class set on . The supplied design shipped as inline styles with no media queries at all, which would have been unusable on a phone. Since paid search traffic is majority mobile and landing-page experience feeds Google Ads Quality Score, the layout is rebuilt here with real breakpoints: <= 980px two-column grids collapse to one <= 640px type scales down, images shorten, trust strip stacks ============================================================================= */ .cc-lp { /* Brand palette, taken from the delivered design */ --lp-dark: #0d2e2b; /* masthead / final CTA / footer */ --lp-slate: #3f4244; /* service band */ --lp-ink: #3b4042; /* headings + body on light */ --lp-body: #5c6365; /* secondary body copy (6.0:1 on white — AA) */ --lp-muted: #6c7375; --lp-green: #8dc63f; --lp-green-dark: #7ab32f; --lp-green-text: #7ab32f; /* eyebrow green on white */ --lp-on-green: #12332f; /* CTA label — 8.5:1 on --lp-green */ --lp-tint: #e2f0cc; /* testimonial cards */ --lp-border: #dfe3e4; --lp-field-border: #d7dbdc; --lp-on-dark: rgba(255, 255, 255, 0.88); --lp-on-dark-soft: rgba(255, 255, 255, 0.78); --lp-hairline: rgba(255, 255, 255, 0.16); /* One source of truth for form control height. The phone field is assembled from different parts than the plain inputs, so without a shared token the two drift apart (they were 43px vs 65px). 44px also clears the 44px minimum touch target. */ --lp-field-h: 44px; --lp-max: 1200px; /* 64px, not the marketing HTML's 40px. Measured off the designer's PDF rendered at 1:1 (1200px): content sits between x=67 and x=1133. */ --lp-gutter: 64px; /* No webfont: the design specifies Helvetica Neue, which is a system face on macOS/iOS and falls back cleanly elsewhere. One less render-blocking request on a page whose whole job is to load fast. */ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.02em; color: var(--lp-ink); background: #ffffff; margin: 0; -webkit-font-smoothing: antialiased; } .cc-lp *, .cc-lp *::before, .cc-lp *::after { box-sizing: border-box; } .cc-lp img { max-width: 100%; } /* Grid children default to min-width:auto, which refuses to shrink below their content's min-content width. The HubSpot form contains fixed-width chrome (the phone country selector, radio labels), so without this the hero column stayed 376px inside a 327px container and the whole page scrolled sideways on a phone. min-width:0 lets the track actually honour the container. */ .cc-lp__hero > *, .cc-lp__split > *, .cc-lp__faq > *, .cc-lp__cards > *, .cc-lp__quotes > * { min-width: 0; } /* :where() is load-bearing, not decoration. These element resets are scoped under .cc-lp, which would normally give them specificity (0,1,1) — higher than every component class below, e.g. .cc-lp__section-title at (0,1,0). The `margin: 0` here would then beat every component's own margin, which silently killed BOTH the `margin: … auto` centering on section headings/ledes AND the vertical spacing under every heading. :where() contributes zero specificity, so these land at (0,1,0) and the later component rules win as intended. */ .cc-lp :where(h1, h2, h3) { letter-spacing: -0.04em; margin: 0; text-wrap: balance; } .cc-lp :where(p) { margin: 0; text-wrap: pretty; } .cc-lp :where(a) { text-decoration: none; } .cc-lp :focus-visible { outline: 2px solid var(--lp-green); outline-offset: 2px; } /* Keyboard-only skip target for the form — the page's single conversion path. Clipped rather than pushed to left:-9999px, which some browsers count toward the scrollable area. */ .cc-lp__skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; background: #ffffff; color: var(--lp-ink); padding: 12px 18px; border-radius: 0 0 6px 0; font-size: 14px; font-weight: 700; } .cc-lp__skip:focus { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; top: 0; left: 0; z-index: 100; } .cc-lp__container { max-width: var(--lp-max); margin: 0 auto; padding-left: var(--lp-gutter); padding-right: var(--lp-gutter); } .cc-lp__hairline { height: 1px; background: var(--lp-hairline); } /* ----------------------------------------------------------------------------- Buttons The design encoded hover states as a `style-hover` attribute, which is not real HTML and never applied. Restored here as proper :hover rules. -------------------------------------------------------------------------- */ .cc-lp__btn { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; } .cc-lp__btn--primary { background: var(--lp-green); color: var(--lp-on-green); padding: 13px 24px; } .cc-lp__btn--primary:hover, .cc-lp__btn--primary:focus { background: var(--lp-green-dark); } .cc-lp__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.55); color: #ffffff; padding: 12px 24px; } .cc-lp__btn--ghost:hover, .cc-lp__btn--ghost:focus { background: rgba(255, 255, 255, 0.1); } .cc-lp__btn-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .cc-lp__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-green-text); } .cc-lp__eyebrow--on-dark { color: var(--lp-green); } .cc-lp__eyebrow--centred { text-align: center; } /* ----------------------------------------------------------------------------- Masthead — top bar, hero and trust strip share one dark ground -------------------------------------------------------------------------- */ .cc-lp__masthead { background: var(--lp-dark); } .cc-lp__topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 26px; } /* The designer's logo is ~2.9x the size in the marketing HTML. Measured off the PDF rendered at 1:1 (1200px): the wordmark's ink is 196x54, its left edge flush with the content column. Both logo SVGs shipped with heavy transparent padding (ink was only ~64% of the viewBox). That padding is why the wordmark looked indented from the hairline below it. The viewBoxes are now cropped to the artwork, so these heights are the true visible height — no magic offsets. */ .cc-lp__logo { height: 54px; width: auto; display: block; } .cc-lp__topbar-meta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .cc-lp__topbar-note { font-size: 15px; color: #ffffff; } .cc-lp__phone { font-size: 17px; font-weight: 700; color: #ffffff; letter-spacing: -0.03em; white-space: nowrap; } .cc-lp__topbar-rule { margin-top: 24px; } /* ---- Hero ---- */ /* align-items is `start`, not the design's `center`. The mock form in the supplied design was eight fields tall; the real HubSpot form is roughly twice that, and centring against it pushed the

below the fold on a 1000px viewport — the worst possible outcome for an ad landing page, where the headline has to confirm the click before anything else. Top-aligning keeps the headline and the first form fields on screen together. / .cc-lphero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; padding-top: 64px; } / 48px, not 52px. Measured cap-height off the designer's PDF (~34px, i.e. ~47px type). The smaller size is also what lets the headline set in three lines as drawn, rather than the four it took at 52px. / .cc-lphero-title { font-size: 48px; line-height: 1.14; color: #ffffff; font-weight: 400; text-wrap: pretty; } .cc-lphero-title strong { font-weight: 700; } .cc-lphero-lede { margin-top: 34px; max-width: 470px; font-size: 17px; line-height: 1.62; color: var(--lp-on-dark); } / ---- Quote card ---- / .cc-lpform-card { background: #ffffff; border-radius: 10px; padding: 34px 36px 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); / The card is the scroll target for every #quote CTA; keep it clear of the viewport edge when jumped to. / scroll-margin-top: 24px; } .cc-lpform-title { margin: 14px 0 8px; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--lp-ink); } .cc-lpform-sub { margin-bottom: 22px; font-size: 14px; line-height: 1.5; color: var(--lp-body); max-width: 330px; } .cc-lpform-note { margin-top: 14px; text-align: center; / Raised from the design's 12.5px — legal/reassurance copy a user relies on should not sit below 13px. / font-size: 13px; line-height: 1.45; color: var(--lp-muted); } .cc-lpform-shell { position: relative; } / Loading placeholder, hidden by JS once HubSpot mounts the form. / .cc-lpform-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--lp-body); font-size: 15px; } .cc-lpspinner { width: 20px; height: 20px; border: 3px solid #e4e6e6; border-top-color: var(--lp-green); border-radius: 50%; animation: cc-lp-spin 0.8s linear infinite; } @keyframes cc-lp-spin { to { transform: rotate(360deg); } } / ---- Trust strip ---- / .cc-lptrust { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 60px; } .cc-lptrust-items { display: flex; align-items: center; flex-wrap: wrap; } .cc-lptrust-item { display: flex; align-items: center; gap: 12px; padding: 0 34px; } .cc-lptrust-item:first-child { padding-left: 0; } .cc-lptrust-item:last-child { padding-right: 0; } .cc-lptrust-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.18); } .cc-lptrust-icon { width: 26px; height: 26px; flex: none; } .cc-lptrust-label { font-size: 14px; font-weight: 700; color: #ffffff; } .cc-lptrust-sub { font-size: 13px; color: var(--lp-on-dark-soft); } .cc-lpbadge { height: 52px; width: auto; opacity: 0.85; } / ----------------------------------------------------------------------------- Generic sections -------------------------------------------------------------------------- / .cc-lpsection { padding: 92px 0 96px; } .cc-lpsection--slate { background: var(--lp-slate); padding: 88px 0 0; } .cc-lpsection--quotes { padding: 88px 0 84px; } .cc-lpsection--faq { padding: 16px 0 96px; } .cc-lpsection--cta { background: var(--lp-dark); padding: 88px 0 92px; text-align: center; } .cc-lpsection-title { margin: 0 auto; max-width: 620px; text-align: center; font-size: 40px; line-height: 1.14; font-weight: 700; color: var(--lp-ink); } .cc-lpsection-title--quotes { margin: 16px auto 44px; } .cc-lpsection-lede { margin: 22px auto 0; max-width: 530px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--lp-body); } / ---- Three-up cards ---- / .cc-lpcards { margin: 48px auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .cc-lpcard { border: 1px solid var(--lp-border); border-radius: 10px; padding: 28px 26px 30px; } .cc-lpcard-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--lp-ink); } .cc-lpcard-text { font-size: 14.5px; line-height: 1.55; color: var(--lp-body); } .cc-lpcards + .cc-lpbtn-row { margin-top: 46px; } / ---- Alternating service blocks ---- / .cc-lpsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 80px 0; } .cc-lpsplit:first-of-type { padding-top: 0; } .cc-lpsplit-title { margin-bottom: 22px; font-size: 38px; line-height: 1.12; font-weight: 700; color: #ffffff; } .cc-lpsplit-text { font-size: 15.5px; line-height: 1.62; color: rgba(255, 255, 255, 0.86); } .cc-lpsplit-text + .cc-lpsplit-text { margin-top: 18px; } / Width/height are set on the element too, so the aspect ratio reserves space before the image decodes (CLS). / .cc-lpsplit-img { width: 100%; height: 420px; object-fit: cover; border-radius: 8px; display: block; background: rgba(255, 255, 255, 0.06); } / The media column comes SECOND in source order on every block so the reading order is always heading-then-photo. On the reversed rows it is pulled left visually only, which the mobile stack then undoes for free. / .cc-lpsplit--reverse .cc-lpsplit-media { order: -1; } / ---- Testimonials ---- / .cc-lpquotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .cc-lpquote { background: var(--lp-tint); border-radius: 10px; padding: 28px 26px 30px; margin: 0; } .cc-lpquote-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-ink); } .cc-lpquote blockquote { margin: 18px 0 22px; font-size: 15px; line-height: 1.55; color: var(--lp-ink); } .cc-lpquote figcaption { font-size: 14px; line-height: 1.45; color: var(--lp-ink); } / ---- FAQ ---- / .cc-lpfaq { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; } .cc-lpfaq-title { font-size: 38px; line-height: 1.14; font-weight: 700; color: var(--lp-ink); } .cc-lpfaq-list { display: grid; gap: 26px; } .cc-lpfaq-q { margin-bottom: 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.03em; color: var(--lp-ink); } .cc-lpfaq-a { font-size: 14.5px; line-height: 1.6; color: var(--lp-body); } / ---- Final CTA ---- / .cc-lpcta-title { margin: 16px 0 18px; font-size: 42px; line-height: 1.14; font-weight: 700; color: #ffffff; } .cc-lpcta-lede { margin: 0 auto; max-width: 420px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); } .cc-lpsection--cta .cc-lpbtn-row { margin-top: 32px; } / ---- Footer ---- / .cc-lpfooter { background: var(--lp-dark); padding-bottom: 44px; } .cc-lpfooter-inner { padding-top: 38px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } / 124px: the stacked footer lockup measures ~203x124 of visible artwork in the design. viewBox cropped to the artwork, as with the header logo. / .cc-lpfooter-logo { height: 124px; width: auto; display: block; } .cc-lpfooter-meta { text-align: right; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); } / ============================================================================= HUBSPOT FORM THEMING Scoped to .cc-lpform-shell so nothing here can reach the forms on /tailor-quote, the homepage, or the service pages. Two renderers are covered. The current developer embed produces .hsfc-* markup (same as the homepage form — see homepage-revision.css:4202+); the legacy renderer produces .hs-form-field / .hs-input / .hs-button. Which one form d25db060 uses depends on how it was built in the portal, so both are themed rather than guessing. !important is required throughout: HubSpot ships inline styles on its own elements and there is no other way to beat them from a stylesheet. ============================================================================= / / Hide the empty embed target so the card never shows a blank gap pre-mount / .cc-lpform-shell .hs-form-html:empty { display: none !important; } / .hsfc-Step is included deliberately: this form ships a rgba(89,89,91,0.1) grey panel that reads as a box-inside-a-box against the white quote card. / .cc-lpform-shell .hsfc-FormWrapper, .cc-lpform-shell .hsfc-Form, .cc-lpform-shell .hsfc-Step { background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; } / HubSpot applies `padding: var(--hsf-backgroundpadding, …)` here, which resolves to 40px. Inside a card that already has its own 36px padding that reads as a large empty inset around the fields, and it squeezes the inputs into a needlessly narrow column. The card owns the padding; the form should fill it. / .cc-lpform-shell .hsfc-StepContent { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 0 !important; } / ---- Suppress the form's own title and intro ---------------------------- The form is configured in HubSpot with a heading ("Tell us about your facility") and an intro line that duplicate, word for word, the static copy already in the card. Two problems: the copy renders twice, and HubSpot emits its heading as an

, giving the page a second top-level heading alongside the hero title. The static copy is the one kept — it is present in the served HTML, so it paints immediately and is visible to crawlers that do not execute JS, whereas the form's version only appears after the embed hydrates. The intro is matched as the row following the heading rather than by .hsfc-RichText, which would also catch the privacy/consent text that must stay. If marketing later removes the heading in HubSpot these rules simply stop matching and both lines render — visibly redundant, but not broken. / .cc-lpform-shell .hsfc-Row:has(.hsfc-Heading), .cc-lpform-shell .hsfc-Row:has(.hsfc-Heading) + .hsfc-Row { display: none !important; } / Collapse HubSpot's empty half-width banner column inside this narrow card / .cc-lpform-shell .hsfc-Step--layoutTemplate-left > .hsfc-StepBanner { display: none !important; } .cc-lpform-shell .hsfc-Step--layoutTemplate-left > .hsfc-StepContent { width: 100% !important; } / ---- Labels ---- / .cc-lpform-shell .hsfc-FieldLabel, .cc-lpform-shell .hs-form-field > label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: var(--lp-ink) !important; margin: 0 0 6px !important; } .cc-lpform-shell .hsfc-FieldLabel span, .cc-lpform-shell .hsfc-FieldLabel span span { color: var(--lp-ink) !important; } .cc-lpform-shell .hsfc-FieldLabelRequiredIndicator, .cc-lpform-shell .hs-form-required { color: var(--lp-green-dark) !important; } / ---- Inputs ---- / .cc-lpform-shell .hsfc-TextInput, .cc-lpform-shell .hsfc-DateInput, .cc-lpform-shell .hsfc-NumberInput input, .cc-lpform-shell .hsfc-Form textarea, .cc-lpform-shell .hsfc-Form select, .cc-lpform-shell input.hs-input, .cc-lpform-shell textarea.hs-input, .cc-lpform-shell select.hs-input { background-color: #ffffff !important; border: 1px solid var(--lp-field-border) !important; border-radius: 6px !important; color: var(--lp-ink) !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; padding: 11px 12px !important; width: 100% !important; box-sizing: border-box !important; } / Uniform control height across text, tel, email, number and select. textarea is excluded on purpose — it keeps its own taller min-height. / .cc-lpform-shell .hsfc-TextInput, .cc-lpform-shell .hsfc-DateInput, .cc-lpform-shell .hsfc-NumberInput input, .cc-lpform-shell .hsfc-Form select, .cc-lpform-shell input.hs-input, .cc-lpform-shell select.hs-input { height: var(--lp-field-h) !important; min-height: var(--lp-field-h) !important; } .cc-lpform-shell .hsfc-Form textarea, .cc-lpform-shell textarea.hs-input { resize: vertical !important; min-height: 70px !important; } .cc-lpform-shell .hsfc-TextInput::placeholder, .cc-lpform-shell .hsfc-Form textarea::placeholder, .cc-lpform-shell .hs-input::placeholder { color: #9aa0a1 !important; } .cc-lpform-shell .hsfc-TextInput:focus, .cc-lpform-shell .hsfc-DateInput:focus, .cc-lpform-shell .hsfc-Form textarea:focus, .cc-lpform-shell .hsfc-Form select:focus, .cc-lpform-shell .hs-input:focus { outline: none !important; border-color: var(--lp-green) !important; box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.18) !important; } / ---- Phone field ---------------------------------------------------------- HubSpot builds this one as a flex row: a country FlagAndCaret button beside the text input. The button ships `padding: 23px` with `box-sizing:content-box` around a 16px flag, so it computes to ~64px tall and stretches the whole row — the phone field rendered 22px taller than every other input. Fixed by pinning the row to the shared field height and letting both children fill it. `position` and `overflow` are deliberately left alone: the country dropdown is position:absolute against an ancestor and would be clipped or mispositioned if either were changed here. / .cc-lpform-shell .hsfc-PhoneInput { display: flex !important; align-items: stretch !important; height: var(--lp-field-h) !important; border: 1px solid var(--lp-field-border) !important; border-radius: 6px !important; background: #ffffff !important; } .cc-lpform-shell .hsfc-PhoneInput .hsfc-TextInput { height: 100% !important; min-height: 0 !important; border: none !important; border-radius: 0 6px 6px 0 !important; box-shadow: none !important; } .cc-lpform-shell .hsfc-PhoneInputFlagAndCaret { box-sizing: border-box !important; height: 100% !important; width: auto !important; flex: none !important; padding: 0 10px !important; display: flex !important; align-items: center !important; gap: 6px !important; border: none !important; border-right: 1px solid var(--lp-field-border) !important; border-radius: 6px 0 0 6px !important; } .cc-lpform-shell .hsfc-PhoneInput:focus-within { border-color: var(--lp-green) !important; box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.18) !important; } / The wrapper draws the focus ring for the whole control, so the inner input must not draw a second one on top of it. / .cc-lpform-shell .hsfc-PhoneInput .hsfc-TextInput:focus { box-shadow: none !important; } / Collapse empty rich-text spacer rows HubSpot emits between fields / .cc-lpform-shell .hsfc-RichText:empty, .cc-lpform-shell .hsfc-Row:has(.hsfc-RichText:empty) { display: none !important; } / ---- Validation ---- / .cc-lpform-shell .hsfc-FieldError, .cc-lpform-shell [data-hsfc-id="FieldError"], .cc-lpform-shell .hs-error-msg, .cc-lpform-shell .hs-error-msgs label { / #c0392b holds 5.4:1 on white — the usual #d33 does not clear AA / color: #c0392b !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 13px !important; margin: 4px 0 0 !important; list-style: none !important; } .cc-lpform-shell .hs-error-msgs { padding: 0 !important; margin: 0 !important; list-style: none !important; } / ---- Consent / fine print ---- / .cc-lpform-shell .hsfc-DataPrivacyField .hsfc-RichText, .cc-lpform-shell .legal-consent-container { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 12px !important; color: var(--lp-muted) !important; line-height: 1.5 !important; } .cc-lpform-shell .grecaptcha-badge { box-shadow: none !important; } / ---- Submit ---- / .cc-lpform-shell .hsfc-NavigationRow { margin-top: 20px !important; } .cc-lpform-shell .hsfc-NavigationRowButtons, .cc-lpform-shell .hs-submit .actions { display: flex !important; justify-content: center !important; gap: 14px !important; padding: 0 !important; } .cc-lpform-shell .hsfc-Button, .cc-lpform-shell .hs-button { background-color: var(--lp-green) !important; color: var(--lp-on-green) !important; border: none !important; border-radius: 6px !important; padding: 14px 26px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; cursor: pointer !important; transition: background-color 0.2s ease !important; width: auto !important; } .cc-lpform-shell .hsfc-Button:hover, .cc-lpform-shell .hs-button:hover { background-color: var(--lp-green-dark) !important; } .cc-lpform-shell .hsfc-Button:focus-visible, .cc-lpform-shell .hs-button:focus-visible { outline: 2px solid var(--lp-ink) !important; outline-offset: 2px !important; } / Secondary/back button on multi-step forms — positional, matching the convention in homepage-revision.css:4449 / .cc-lpform-shell .hsfc-NavigationRowButtons .hsfc-Button:first-child:not(:last-child) { background-color: transparent !important; color: var(--lp-body) !important; border: 1px solid var(--lp-field-border) !important; } / ============================================================================= THANK-YOU / CONVERSION PAGE ============================================================================= / .cc-lpconfirm { background: var(--lp-dark); min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 80px 0 96px; } .cc-lpconfirm-card { max-width: 640px; width: 100%; background: #ffffff; border-radius: 12px; padding: 56px 48px 48px; text-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); } .cc-lpconfirm-mark { width: 76px; height: 76px; margin: 0 auto 26px; border-radius: 50%; background: var(--lp-green); display: flex; align-items: center; justify-content: center; } .cc-lpconfirm-mark svg { width: 38px; height: 38px; display: block; } .cc-lpconfirm-mark path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: cc-lp-tick 0.5s ease-out 0.15s forwards; } @keyframes cc-lp-tick { to { stroke-dashoffset: 0; } } .cc-lpconfirm-title { font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--lp-ink); } .cc-lpconfirm-lede { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--lp-body); } .cc-lpconfirm-next { margin: 32px 0 0; padding: 24px 26px; background: #f6f7f7; border-radius: 10px; text-align: left; list-style: none; display: grid; gap: 12px; } .cc-lpconfirm-next li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.55; color: var(--lp-body); } .cc-lpconfirm-next li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 2px; background: var(--lp-green); } .cc-lpconfirm-cta { margin-top: 30px; } .cc-lpconfirm-phone { display: block; margin-top: 18px; font-size: 14px; color: var(--lp-body); } .cc-lpconfirm-phone a { color: var(--lp-green-dark); font-weight: 700; } / ============================================================================= RESPONSIVE ============================================================================= / / ---- Tablet / small laptop: every two- and three-column grid collapses ---- / @media (max-width: 980px) { .cc-lp { --lp-gutter: 24px; } .cc-lplogo { height: 46px; } .cc-lpfooter-logo { height: 100px; } .cc-lphero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; } .cc-lphero-lede { max-width: none; } .cc-lpform-sub { max-width: none; } .cc-lpsection { padding: 64px 0 68px; } .cc-lpsection--slate { padding: 64px 0 0; } .cc-lpsection--quotes { padding: 64px 0 60px; } .cc-lpsection--faq { padding: 8px 0 68px; } .cc-lpsection--cta { padding: 64px 0 68px; } .cc-lpcards, .cc-lpquotes { grid-template-columns: 1fr; gap: 20px; } .cc-lpsplit { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; } / Undo the visual reversal so every stacked block reads heading-then-photo / .cc-lpsplit--reverse .cc-lpsplit-media { order: 0; } .cc-lpfaq { grid-template-columns: 1fr; gap: 32px; } .cc-lpfooter-inner { align-items: flex-start; gap: 24px; } .cc-lpfooter-meta { text-align: left; } } / ---- Phone ---- / @media (max-width: 640px) { .cc-lptopbar { gap: 18px; padding-top: 20px; } .cc-lplogo { height: 38px; } .cc-lptopbar-meta { gap: 16px; width: 100%; } / Drop the tagline on the smallest screens — the phone number and CTA are what convert, and three wrapped items make the bar taller than the fold. / .cc-lptopbar-note { display: none; } / 44px minimum touch target / .cc-lpbtn--primary { padding: 14px 22px; } .cc-lpbtn--ghost { padding: 13px 22px; } .cc-lphero-title { font-size: 32px; } .cc-lphero-lede { margin-top: 22px; font-size: 16px; } .cc-lpform-card { padding: 26px 20px 24px; } .cc-lpform-title { font-size: 22px; } .cc-lptrust { padding-top: 40px; padding-bottom: 44px; gap: 24px; } .cc-lptrust-items { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; } .cc-lptrust-item { padding: 0; } / Vertical rules make no sense once the items stack / .cc-lptrust-divider { display: none; } .cc-lpbadge { height: 44px; } .cc-lpsection-title, .cc-lpfaq-title { font-size: 28px; } .cc-lpsplit-title { font-size: 26px; } .cc-lpsplit-img { height: 240px; } .cc-lpcta-title { font-size: 30px; } .cc-lpcards { margin-top: 32px; } .cc-lpcards + .cc-lpbtn-row { margin-top: 32px; } .cc-lpbtn-row { flex-direction: column; align-items: stretch; text-align: center; } .cc-lpconfirm { padding: 48px 0 56px; } .cc-lpconfirm-card { padding: 36px 22px 32px; } .cc-lpconfirm-title { font-size: 26px; } .cc-lpfooter-logo { height: 80px; } } / ---- Motion ---- / @media (prefers-reduced-motion: reduce) { .cc-lp , .cc-lp ::before, .cc-lp ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .cc-lp__confirm-mark path { stroke-dashoffset: 0; } }