From 083443a43bf6c1681dd6dbab614b3798d095f4b2 Mon Sep 17 00:00:00 2001 From: Alejandro Veras Date: Fri, 16 Oct 2026 13:38:09 -0400 Subject: [PATCH] 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 --- README.md | 2 +- ghl/lead-form.css | 98 ++++++++++++++++++++++++++++++++++++++++ static/assets/styles.css | 10 ++-- 3 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 ghl/lead-form.css diff --git a/README.md b/README.md index 55b6179..2db5661 100644 --- a/README.md +++ b/README.md @@ -61,4 +61,4 @@ Importa el repo en Vercel. `vercel.json` ya define el build (`npm run build`), l - **Press:** falta el link del artículo de Gulf Insider y confirmar su titular exacto (`FEATURE` en `src/pages/press.mjs`). - **Korrith:** falta el cargo de Dylan (el tercer campo, vacío, en `src/pages/portfolio.mjs`). - **Páginas fuera del alcance actual:** Playbook y Poetry no forman parte del sitio. Sus secciones se muestran sin botón; si se crean esas páginas, se añade el botón con su texto original del documento. -- **Formulario y agenda (GoHighLevel):** los IDs están en `SITE.ghl` (`src/layout.mjs`). En GoHighLevel, el formulario "Dylan – Lead Form" debe redirigir a `https://dylanmazzei.com/contact/book/?submitted=1` al enviarse. Sin `?submitted=1`, `/contact/book/` muestra un aviso para llenar el formulario en vez de los calendarios (es solo un filtro en el navegador: los calendarios de GHL siguen siendo públicos, así que el cobro y la disponibilidad se controlan en GHL). La página no se indexa ni sale en el sitemap. +- **Formulario y agenda (GoHighLevel):** los IDs están en `SITE.ghl` (`src/layout.mjs`). En GoHighLevel, el formulario "Dylan – Lead Form" debe redirigir a `https://dylanmazzei.com/contact/book/?submitted=1` al enviarse. Sin `?submitted=1`, `/contact/book/` muestra un aviso para llenar el formulario en vez de los calendarios (es solo un filtro en el navegador: los calendarios de GHL siguen siendo públicos, así que el cobro y la disponibilidad se controlan en GHL). La página no se indexa ni sale en el sitemap. El estilo oscuro del formulario vive en GHL: pega `ghl/lead-form.css` en el formulario (Styles → Custom CSS). diff --git a/ghl/lead-form.css b/ghl/lead-form.css new file mode 100644 index 0000000..afba12b --- /dev/null +++ b/ghl/lead-form.css @@ -0,0 +1,98 @@ +/* Custom CSS for the GoHighLevel "Dylan – Lead Form" (xm10A7alZrxeKDtkMkD2). + Paste it in GHL: Sites → Forms → edit the form → Styles → Custom CSS. + It makes the embedded form match the site's dark contact page: transparent + background, dark fields, two-column name/email row, brand-blue button. + GHL writes its own styles with !important and strong selectors, hence the long ones here. */ + +@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap"); + +html, body, .ghl-form-wrap { background: transparent !important; } + +#_builder-form { + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + padding: 0 !important; + max-width: none !important; +} +.ghl-form-wrap { max-width: none !important; } + +#_builder-form, #_builder-form * { font-family: "Inter Tight", "Inter", system-ui, sans-serif !important; } + +/* Name and email side by side, everything else full width */ +#_builder-form .fields-container { + display: grid !important; + grid-template-columns: 1fr 1fr; + column-gap: 16px; +} +#_builder-form .form-field-wrapper { grid-column: 1 / -1; width: 100% !important; max-width: none !important; padding: 0 !important; margin-bottom: 18px !important; } +#_builder-form .form-field-wrapper:nth-child(1) { grid-column: 1; } +#_builder-form .form-field-wrapper:nth-child(2) { grid-column: 2; } +@media (max-width: 400px) { + #_builder-form .form-field-wrapper:nth-child(1), + #_builder-form .form-field-wrapper:nth-child(2) { grid-column: 1 / -1; } +} + +/* Labels */ +#_builder-form .form-builder--item label { + display: block !important; + line-height: 1.4 !important; + margin-top: 0 !important; + font-size: 13px !important; + font-weight: 400 !important; + color: #8896b3 !important; + margin-bottom: 8px !important; +} +#_builder-form .form-builder--item label span { color: #1fb7ff !important; font-size: inherit !important; line-height: inherit !important; vertical-align: baseline !important; } + +/* Fields */ +html body #_builder-form .form-builder--item .form-control[name][class] { + height: 52px !important; + padding: 14px 16px !important; + font-size: 16px !important; + font-weight: 500 !important; + color: #f3f7ff !important; + background: rgba(255, 255, 255, 0.05) !important; + border: 1px solid rgba(255, 255, 255, 0.06) !important; + border-radius: 16px !important; + box-shadow: none !important; + transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; +} +html body #_builder-form .form-builder--item textarea.form-control[name][class] { height: auto !important; min-height: 150px; } +html body #_builder-form .form-builder--item .form-control[name][class]::placeholder { color: #6c7894 !important; opacity: 1; } +html body #_builder-form .form-builder--item .form-control[name][class]:focus { + outline: none !important; + background: rgba(255, 255, 255, 0.07) !important; + border-color: #1fb7ff !important; + box-shadow: 0 0 0 4px rgba(31, 183, 255, 0.14) !important; +} +html body #_builder-form .form-builder--item .email-input .form-control[name][class] { padding-left: 44px !important; } +#_builder-form .input-icon { left: 16px !important; color: #6c7894 !important; } +#_builder-form input:-webkit-autofill { + -webkit-text-fill-color: #f3f7ff !important; + -webkit-box-shadow: 0 0 0 1000px #0d1220 inset !important; +} + +/* Submit button */ +#_builder-form .form-builder--btn-submit { margin-top: 6px !important; } +#_builder-form .button-element { + min-height: 50px !important; + background: #1fb7ff !important; + border: 0 !important; + border-radius: 12px !important; + box-shadow: none !important; + transition: background-color .15s ease, transform .15s ease; +} +#_builder-form .button-element:hover { background: #5cc9ff !important; transform: translateY(-1px); } +#_builder-form .button-element .button-text div { + color: #04101c !important; + font-size: 13px !important; + font-weight: 600 !important; + letter-spacing: 0.08em !important; + text-transform: uppercase !important; +} + +/* Footer text (privacy / terms links) and error messages */ +#_builder-form .text-element { color: #6c7894 !important; font-size: 13px !important; } +#_builder-form .text-element a { color: #8896b3 !important; } +#_builder-form .error, #_builder-form .text-danger { color: #ff7a8a !important; } diff --git a/static/assets/styles.css b/static/assets/styles.css index a363445..e3845b9 100644 --- a/static/assets/styles.css +++ b/static/assets/styles.css @@ -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; }