Drop the white backdrop behind the lead form and add dark GHL form CSS

ghl/lead-form.css is pasted into the GHL form's Custom CSS so the embed matches the
dark contact page. In light mode the form sits on a dark panel so it stays readable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-16 13:38:09 -04:00
parent b2eff3d3be
commit 083443a43b
3 changed files with 106 additions and 4 deletions
+7 -3
View File
@@ -1031,9 +1031,13 @@ h1, h2, h3, h4 { font-weight: 600; }
.fp-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
/* GoHighLevel embeds (lead form + booking calendars) */
/* The lead form is styled dark inside GHL (ghl/lead-form.css), so it sits on the card with no
backdrop; in light mode it gets a dark panel so its light text stays readable. */
.ghl-wrap { border-radius: 14px; overflow: hidden; background: #ffffff; }
.ghl-frame { display: block; width: 100%; border: 0; background: transparent; }
.ghl-wrap-form .ghl-frame { min-height: 460px; }
.ghl-wrap-form { background: transparent; border-radius: 0; overflow: visible; }
[data-theme="light"] .ghl-wrap-form { background: #0b1120; border-radius: 16px; padding: 22px; }
.ghl-frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: light; }
.ghl-wrap-form .ghl-frame { min-height: 340px; }
.ghl-wrap-cal { padding: 8px; }
.ghl-wrap-cal .ghl-frame { min-height: 720px; }
.ghl-card { gap: 20px; }
@@ -1057,5 +1061,5 @@ h1, h2, h3, h4 { font-weight: 600; }
#schedule .wrap { position: relative; }
[data-gate="locked"] .gate-open, [data-gate="open"] .gate-locked, html:not([data-gate]) .gate-locked { display: none !important; }
.cal-panel[data-off] { position: absolute; left: -10000px; top: 0; width: min(980px, 100%); visibility: hidden; pointer-events: none; }
.ghl-wrap-form { min-height: 460px; }
.ghl-wrap-form { min-height: 340px; }
.ghl-wrap-cal { min-height: 720px; }