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>
2026-10-16 13:38:09 -04:00
parent b2eff3d3be
commit 083443a43b
3 changed files with 106 additions and 4 deletions
@@ -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).
@@ -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; }
@@ -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; }