@charset "UTF-8"; /* =========================================================================== Well Lit — survey message styling PASTE INTO GHL, NOT INTO THE LANDING PAGE. Where: Sites -> Surveys -> this survey -> Styles / Custom CSS. Why it cannot live in the landing page: the survey renders inside a cross-origin iframe on api.leadconnectorhq.com. Nothing in the parent document can reach into it — not CSS, not JS. This has to be served by GHL with the survey itself. What it fixes: GHL renders the disqualification / thank-you message with `padding: 0` and `width: fit-content` on the white card, so the text runs straight into the rounded corners and the box shrink-wraps the longest line. Every rule below carries !important because the values it is overriding are inline styles on the elements themselves. Structure being targeted (verified live, not guessed): #_builder-form .thank-you-message width: fit-content; overflow: auto > div display: inline-block; radius 10px > div background #fff; padding: 0; width: fit-content

heading

body copy

Tokens are Well Lit's, sampled from the declared Webflow :root on well-lit.com and matching assets/lp.css on the landing page: accent #fdde35 accent hover #e9c81f ink on accent #161618 ink #161618 body #393935 hairline #dfdfdf card radius 20px button radius 5px heading weight 500 =========================================================================== */ /* Instrument Sans is Well Lit's heading face and the survey will not have it. @import has to be the first thing in the stylesheet to work at all. If GHL strips it, set the survey's heading font in the builder's own style panel instead — that is the supported route and it survives. */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&display=swap"); /* Let the message use the width it is given rather than shrink-wrapping. */ #_builder-form .thank-you-message, #_builder-form .thank-you-message > div { width: 100% !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; overflow: visible !important; box-sizing: border-box !important; } /* The white card. This is the one doing the damage: padding:0 is why the copy touches the border radius. Radius is 20px, Well Lit's --r-lg, so the card matches the panels on the landing page rather than GHL's default 10px. */ #_builder-form .thank-you-message > div > div { width: 100% !important; max-width: 100% !important; padding: 30px 32px !important; box-sizing: border-box !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid #dfdfdf !important; box-shadow: 0 1px 2px rgba(22, 22, 24, 0.04), 0 12px 34px rgba(22, 22, 24, 0.07) !important; line-height: 1.65 !important; color: #393935 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; text-align: left !important; } /* Body copy. The inline padding-left:0!important is already there; what is missing is vertical rhythm and a readable colour. #393935 on white is 11.6:1. */ #_builder-form .thank-you-message p { margin: 0 0 15px !important; padding: 0 !important; font-size: 16px !important; line-height: 1.65 !important; color: #393935 !important; text-align: left !important; } #_builder-form .thank-you-message p:last-child { margin-bottom: 0 !important; } /* First line is the heading. GHL emits it as inside the first
, so it is styled as a block rather than replaced. WEIGHT 500 IS NOT A TYPO. Well Lit's headings are light — that is the single strongest signal in this brand, and setting this to 700 because it is a makes the card look like somebody else's company. Instrument Sans at 500 with no negative tracking, same as every h2 on the landing page. */ #_builder-form .thank-you-message p:first-child { margin-bottom: 12px !important; } #_builder-form .thank-you-message p:first-child strong { display: block !important; font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.16 !important; letter-spacing: 0 !important; color: #161618 !important; } /* The link is the only action on this screen, so it should look like one. Brand yellow with near-black ink, and deliberately the same button as the landing page: 5px radius rather than a pill, weight 500 rather than bold, and no uppercase. Well Lit's buttons are quiet; a bold uppercase pill would read as a different brand. Label contrast is generous — #161618 on #fdde35 is 13.5:1, and 11:1 on the hover shade. Never put white on this yellow: 1.34:1, illegible. One honest caveat: yellow against the white card is 1.34:1, under the 3:1 WCAG 1.4.11 asks of a control's edge. That is true of Well Lit's own buttons wherever they sit on a light section, on their site and on ours, so this matches the brand rather than diverging from it for one screen. The label is doing the identifying work. If you would rather have the edge, add: border: 2px solid #161618 !important; padding: 13px 28px !important; (keeps the outer size identical) ...but then it stops matching the landing page, so make that a deliberate call rather than a default. */ #_builder-form .thank-you-message a { display: inline-block !important; margin-top: 6px !important; padding: 15px 30px !important; background: #fdde35 !important; color: #161618 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; border: 0 !important; border-radius: 5px !important; transition: all 0.3s ease-in-out !important; } #_builder-form .thank-you-message a:hover { background: #e9c81f !important; } #_builder-form .thank-you-message a:focus-visible { outline: 3px solid #fdde35 !important; outline-offset: 3px !important; } /* Narrow phones: keep the card off the edges. */ @media (max-width: 480px) { #_builder-form .thank-you-message > div > div { padding: 22px 20px !important; } #_builder-form .thank-you-message p:first-child strong { font-size: 21px !important; } }

What is the address of the project?

Who are we preparing an estimate for?