/* FloorWise survey CSS (v4, scoped) Works in both places: 1) Survey > Styles > Advanced > Custom CSS 2) Landing page Custom CSS (when the survey is placed on a funnel/website page) Everything is scoped to the survey, so it never touches the rest of the page. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap'); .hl-app[data-ghl-form-element="survey"] { /* FloorWise palette */ --fw-ink: #1B2F3D; /* headings and text, deep navy */ --fw-muted: #6B7A85; /* help text */ --fw-line: #E1E7EC; /* option borders */ --fw-line-hover: #B9C7D1; --fw-page: #F3F6F8; /* page background, cool light grey */ --fw-card: #FFFFFF; --fw-brand: #214962; /* FloorWise navy: selected state, focus, links */ --fw-brand-dark: #173447; --fw-brand-soft: #EDF3F7; /* selected option fill */ --fw-cta: #B30C42; /* FloorWise crimson: Next / Submit */ --fw-cta-dark: #920935; --fw-accent: #B30C42; /* required asterisk */ --fw-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --fw-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* ===== The one card (wraps form + footer) ===== */ .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap { max-width: 540px !important; margin: 40px auto !important; background: var(--fw-card) !important; border-radius: 24px !important; box-shadow: 0 24px 60px -28px rgba(60, 50, 30, 0.25) !important; overflow: hidden !important; } /* Inner form: no second card */ .hl-app[data-ghl-form-element="survey"] #_builder-form { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; max-width: 100% !important; padding: 40px 36px 8px !important; } /* ===== Question title ===== */ .hl-app[data-ghl-form-element="survey"] #_builder-form .field-label, .hl-app[data-ghl-form-element="survey"] #_builder-form .label-alignment { display: block !important; font-family: var(--fw-serif) !important; font-size: 27px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: var(--fw-ink) !important; margin: 0 0 22px 0 !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .field-label span, .hl-app[data-ghl-form-element="survey"] #_builder-form .label-alignment span { font-family: var(--fw-sans) !important; font-size: 16px !important; color: var(--fw-accent) !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .item-description:empty { display: none !important; } /* ===== Radio options as cards ===== */ .hl-app[data-ghl-form-element="survey"] #_builder-form .option-radio { display: block !important; margin: 0 0 12px 0 !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .standard-radio-container { position: relative !important; display: flex !important; align-items: center !important; gap: 16px !important; width: 100% !important; box-sizing: border-box !important; padding: 18px 20px !important; background: #FFFFFF !important; border: 1.5px solid var(--fw-line) !important; border-radius: 14px !important; cursor: pointer !important; transition: border-color .15s, background-color .15s !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .standard-radio-container:hover { border-color: var(--fw-line-hover) !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .standard-radio-container:has(> input:focus-visible) { border-color: var(--fw-brand) !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .standard-radio-container:has(> input:checked) { background: var(--fw-brand-soft) !important; border-color: var(--fw-brand) !important; } /* Option text */ .hl-app[data-ghl-form-element="survey"] #_builder-form .standard-radio-container > label { order: 1 !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; font-family: var(--fw-sans) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--fw-ink) !important; cursor: pointer !important; } /* Whole card clickable */ .hl-app[data-ghl-form-element="survey"] #_builder-form .standard-radio-container > label::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 14px !important; } /* Radio circle, right side, always a perfect circle */ .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .standard-radio-container > input[type="radio"] { -webkit-appearance: none !important; appearance: none !important; order: 2 !important; flex: 0 0 20px !important; box-sizing: border-box !important; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; min-height: 20px !important; max-height: 20px !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; outline: none !important; background: #FFFFFF !important; border: 1.5px solid #D6D2C9 !important; border-radius: 50% !important; opacity: 1 !important; cursor: pointer !important; transition: border-color .15s, background-color .15s, box-shadow .15s !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .standard-radio-container > input[type="radio"]:checked { background: var(--fw-brand) !important; border-color: var(--fw-brand) !important; box-shadow: inset 0 0 0 4px #FFFFFF !important; } /* ===== Text, email, phone inputs ===== */ .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item input.form-control, .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item input[type="email"], .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item input[type="tel"], .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item textarea { width: 100% !important; box-sizing: border-box !important; font-family: var(--fw-sans) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--fw-ink) !important; background: #FFFFFF !important; border: 1.5px solid var(--fw-line) !important; border-radius: 14px !important; padding-top: 16px !important; padding-bottom: 16px !important; padding-right: 18px !important; height: auto !important; box-shadow: none !important; transition: border-color .15s !important; } /* keep GHL's left padding for email icon and phone flag */ .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item input.form-control:not(#email) { padding-left: 18px !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item input:focus, .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .form-builder--item textarea:focus { outline: none !important; border-color: var(--fw-brand) !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form ::placeholder { font-family: var(--fw-sans) !important; font-size: 16px !important; color: #A9ACA4 !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .email-input .input-icon { top: 50% !important; transform: translateY(-50%) !important; } /* ===== Terms checkbox (plain, checkbox on the left) ===== */ .hl-app[data-ghl-form-element="survey"] #_builder-form .terms-and-conditions .checkbox-container { display: flex !important; align-items: flex-start !important; gap: 12px !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .terms-and-conditions input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; margin: 2px 0 0 0 !important; background: #FFFFFF no-repeat center / 13px 13px !important; border: 1.5px solid #D6D2C9 !important; border-radius: 6px !important; cursor: pointer !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form#_builder-form .terms-and-conditions input[type="checkbox"]:checked { background-color: var(--fw-brand) !important; border-color: var(--fw-brand) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .terms-and-conditions label, .hl-app[data-ghl-form-element="survey"] #_builder-form .terms-and-conditions label * { margin: 0 !important; font-family: var(--fw-sans) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--fw-muted) !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .terms-and-conditions a { color: var(--fw-brand) !important; text-decoration: underline !important; } /* ===== Footer: dark bar becomes a clean button row ===== */ .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; height: auto !important; padding: 8px 36px 36px !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer-buttons { height: auto !important; gap: 12px !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-btn-placeholder { display: none !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 54px !important; padding: 0 24px !important; font-family: var(--fw-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: #FFFFFF !important; background: var(--fw-cta) !important; border: none !important; border-radius: 14px !important; box-shadow: none !important; cursor: pointer !important; transition: background-color .15s !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-btn:hover { background: var(--fw-cta-dark) !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-btn svg, .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-btn svg path { stroke: #FFFFFF !important; color: #FFFFFF !important; margin: 0 !important; } /* Back button: outlined navy with a visible arrow */ .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer-buttons .ghl-footer-back { flex: 0 0 auto !important; min-width: 54px !important; padding: 0 18px !important; color: var(--fw-brand) !important; background: #FFFFFF !important; border: 1.5px solid var(--fw-line) !important; opacity: 1 !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer-buttons .ghl-footer-back:hover { background: var(--fw-brand-soft) !important; border-color: var(--fw-brand) !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer-buttons .ghl-footer-back svg, .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer-buttons .ghl-footer-back svg path { stroke: var(--fw-brand) !important; color: var(--fw-brand) !important; } /* ===== Mobile ===== */ @media (max-width: 640px) { .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap { margin: 12px !important; border-radius: 20px !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form { padding: 28px 20px 4px !important; } .hl-app[data-ghl-form-element="survey"] #_builder-form .field-label, .hl-app[data-ghl-form-element="survey"] #_builder-form .label-alignment { font-size: 24px !important; } .hl-app[data-ghl-form-element="survey"] .ghl-form-wrap .ghl-footer { padding: 8px 20px 24px !important; } } @media (prefers-reduced-motion: reduce) { .hl-app[data-ghl-form-element="survey"] * { transition: none !important; } }