From 27c0189f2b644e665f43ccc22f09991c8556daf6 Mon Sep 17 00:00:00 2001 From: Alejandro Veras Date: Mon, 19 Oct 2026 12:17:39 -0400 Subject: [PATCH] Add a compact copy of the GHL form CSS that survives copy-paste Pasting the indented CSS through Slack turned the indentation into non-breaking spaces, so GHL kept the rules but browsers dropped their declarations. Co-Authored-By: Claude Opus 5.5 --- README.md | 2 +- ghl/lead-form.css | 3 ++- ghl/lead-form.min.css | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 ghl/lead-form.min.css diff --git a/README.md b/README.md index 2db5661..5d8c2c0 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. El estilo oscuro del formulario vive en GHL: pega `ghl/lead-form.css` en el formulario (Styles → Custom CSS). +- **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.min.css` en el formulario (Custom CSS). Usa la versión compacta: al copiar la versión con sangría desde Slack se cuelan espacios invisibles (non-breaking spaces) y GHL descarta esas reglas. diff --git a/ghl/lead-form.css b/ghl/lead-form.css index afba12b..c8bba0d 100644 --- a/ghl/lead-form.css +++ b/ghl/lead-form.css @@ -1,5 +1,6 @@ /* Custom CSS for the GoHighLevel "Dylan – Lead Form" (xm10A7alZrxeKDtkMkD2). - Paste it in GHL: Sites → Forms → edit the form → Styles → Custom CSS. + Readable source. Paste ghl/lead-form.min.css (same rules, no indentation) into GHL: + copying indented CSS through Slack turns spaces into non-breaking spaces, which breaks the rules. 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. */ diff --git a/ghl/lead-form.min.css b/ghl/lead-form.min.css new file mode 100644 index 0000000..06e570b --- /dev/null +++ b/ghl/lead-form.min.css @@ -0,0 +1 @@ +@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}#_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}}#_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}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}#_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}#_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}