/* ══════════════════════════════════════════════════════════ ONE bespoke class scopes the whole section: .hns-upl-hero ══════════════════════════════════════════════════════════ */ /* Root cause of the form-column "not blending" issue: this rule used to be a bare ".hns-upl-hero" selector, which matches ALL THREE elements carrying that class (the row, the logos image, AND the form's own column) since el_class is applied to all three. That meant the form's column rendered its OWN copy of this diagonal gradient, recalculated against its own (narrower) box — a different-looking patch than the row's gradient behind it, producing a visible seam instead of a blend. Confirmed via computed background-image on the live element, not assumed. Scoped to .vc_row specifically now — the row is the only one of the three that also carries that class. */ .hns-upl-hero.vc_row { background: linear-gradient(145deg, #1f160c 0%, #2d1e0e 100%) !important; } .hns-upl-hero .wpb_wrapper { font-family: 'Didact Gothic', 'HNS Didact Fallback', sans-serif; /* site default, applies to everything unless overridden below */ } /* ── Headings: Aldrich. Compound selector (.wpb_wrapper h1) rather than (.hns-upl-hero h1) — needed because ".hns-upl-hero .wpb_wrapper" (two classes, specificity 0,2,0) otherwise beats ".hns-upl-hero h1" (one class + one tag, 0,1,1): confirmed live via computed style, headings were rendering Didact Gothic instead of Aldrich until this was fixed. ── */ .hns-upl-hero .wpb_wrapper h1, .hns-upl-hero .wpb_wrapper h2 { font-family: 'Aldrich', 'HNS Aldrich Fallback', sans-serif; font-weight: 400; color: #f7f1e6; letter-spacing: -0.01em; margin: 0 0 20px; } .hns-upl-hero .wpb_wrapper h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; } .hns-upl-hero .wpb_wrapper h2 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; } /* ── Eyebrow label. The source markup is a bare as the first thing in the left column's copy block, but wpautop wraps any inline content preceding the first block element (the

) in its own

— confirmed live via the actual DOM (span's parent is a bare

, not .wpb_wrapper directly). Target that wpautop-inserted

specifically so it gets eyebrow treatment instead of falling through to the general paragraph rule below (this selector's higher specificity wins regardless of source order). ── */ .hns-upl-hero .vc_row_inner > .wpb_column:first-of-type .wpb_wrapper > p:first-child, .hns-upl-hero .vc_inner > .wpb_column:first-of-type .wpb_wrapper > p:first-child { display: inline-flex; align-items: center; gap: 12px; font-family: 'Didact Gothic', 'HNS Didact Fallback', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #e0a15c; margin: 0 0 18px; max-width: none; line-height: normal; } .hns-upl-hero .vc_row_inner > .wpb_column:first-of-type .wpb_wrapper > p:first-child::before, .hns-upl-hero .vc_inner > .wpb_column:first-of-type .wpb_wrapper > p:first-child::before { content: ""; width: 20px; height: 1px; background: #e0a15c; flex-shrink: 0; } /* ── SEO copy paragraphs: 18px, generous line-height/measure, proper contrast against the dark ground (0.85 warm-white ≈ 8:1 on this bg). ── */ .hns-upl-hero p { font-family: 'Didact Gothic', 'HNS Didact Fallback', sans-serif; font-size: 18px; line-height: 1.75; color: rgba(247, 241, 230, 0.85); max-width: 34.8em; /* = 62ch of Didact Gothic; em, not ch, so the measure does not change on font swap (CLS) */ margin: 0 0 18px; } .hns-upl-hero p:last-child { margin-bottom: 0; } .hns-upl-hero p strong { color: #f7f1e6; font-weight: 600; } .hns-upl-hero .hl-flyout-form-wrap p.hl-lead-form-intro { color: #7a6a58; } /* M174: drawer is light; keep hero cream text out of it */ /* ── Builder logos card — compound selector, no extra classname: el_class="hns-upl-hero" + WPBakery's own .wpb_single_image. ── */ .hns-upl-hero.wpb_single_image { display: block; background: #fffdfa; border-radius: 16px; padding: 18px 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(36, 26, 18, 0.06), 0 8px 24px rgba(36, 26, 18, 0.07); } .hns-upl-hero.wpb_single_image img { width: 100%; height: auto; } /* ── Pre-register form card — compound selector: el_class="hns-upl-hero" + WPBakery's own .wpb_text_column, on the ONE vc_column_text that wraps [fluentform id="30"] (the left column's copy vc_column_text does not carry this class, so it's unaffected). ── */ .hns-upl-hero.wpb_text_column { background: #fffdfa; border: 1px solid rgba(36, 26, 18, 0.08); border-radius: 20px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 1px 3px rgba(36, 26, 18, 0.06), 0 8px 24px rgba(36, 26, 18, 0.07); } /* The above only reaches the outer WPBakery column wrapper. Fluent Forms renders its OWN wrapper one level in (.fluentform_wrapper_30.ffs_custom_wrap) — a real, separate element, confirmed via the actual DOM. This site has a pre-existing global "Advanced Styler" stylesheet that sets a background-color directly on .ffs_custom_wrap for at least one other form (form 41, confirmed set to green in that stylesheet) — a plain class selector at (0,1,0) specificity. Kept transparent here so the light card above shows through cleanly rather than stacking two backgrounds; !important and scoped to just this form so that shared styler can't silently reassert its own background later. */ .hns-upl-hero .fluentform_wrapper_30.ffs_custom_wrap { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Fluent Forms' own real output classes — confirmed against the live rendered markup of form #30. Labels are already hidden by the form's own "hide_label" layout setting (placeholder-only inputs). */ .hns-upl-hero.wpb_text_column .ff-t-container.ff-column-container { gap: 14px; } .hns-upl-hero.wpb_text_column .ff-el-group { margin-bottom: 14px; } .hns-upl-hero.wpb_text_column .ff-el-form-control { width: 100%; padding: 13px 15px; border: 1px solid rgba(36, 26, 18, 0.16); border-radius: 10px; background: #fff; color: #241a12; font-family: 'Didact Gothic', 'HNS Didact Fallback', sans-serif; font-size: 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .hns-upl-hero.wpb_text_column .ff-el-form-control::placeholder { color: #7a6d5e; } .hns-upl-hero.wpb_text_column .ff-el-form-control:focus { outline: none; border-color: #c8702a; box-shadow: 0 0 0 3px rgba(200, 112, 42, 0.14); } .hns-upl-hero.wpb_text_column select.ff-el-form-control { cursor: pointer; } .hns-upl-hero.wpb_text_column textarea.ff-el-form-control { resize: vertical; min-height: 90px; } .hns-upl-hero.wpb_text_column .ff_submit_btn_wrapper { margin-top: 4px; } /* !important: a pre-existing shared .ff-btn-submit rule elsewhere on the site (loaded after this stylesheet, same specificity) was winning — confirmed live, not assumed. Text is dark ink on the vivid accent (not white) for AA contrast: ~5.9:1 vs ~3.3:1 with white. */ .hns-upl-hero.wpb_text_column .ff-btn-submit { width: 100% !important; padding: 15px !important; background: #0e9a00 !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-family: 'Didact Gothic', 'HNS Didact Fallback', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .hns-upl-hero.wpb_text_column .ff-btn-submit:hover { background: #ce7200 !important; } .hns-upl-hero.wpb_text_column .ff-btn-submit:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .hns-upl-hero.wpb_text_column .ff-el-form-control, .hns-upl-hero.wpb_text_column .ff-btn-submit { transition: none; } } /* === M113 landing-pages === */ /* CLS: metric-matched local fallbacks so the web-font swap (Aldrich is ~15% wider, Didact ~5% narrower than Arial) does not re-wrap the hero heading/copy. Ratios measured from rendered text widths. */ @font-face { font-family: 'HNS Aldrich Fallback'; src: local('Arial'), local('Arimo'), local('Liberation Sans'), local('Helvetica'); size-adjust: 115.3%; ascent-override: 80%; descent-override: 21%; line-gap-override: 0%; } @font-face { font-family: 'HNS Didact Fallback'; src: local('Arial'), local('Arimo'), local('Liberation Sans'), local('Helvetica'); size-adjust: 95.2%; ascent-override: 110%; descent-override: 30%; line-gap-override: 0%; } /* Pre-register form: the curated phone field (country select + number) cannot fit a half-width cell, so the name/phone pair stacks full width. */ .hns-upl-hero.wpb_text_column .ff-t-container.ff-column-container { display: flex; flex-direction: column; gap: 0; } .hns-upl-hero.wpb_text_column .ff-t-container.ff-column-container > .ff-t-cell { width: 100% !important; flex-basis: auto !important; max-width: none; } .hns-upl-hero .hns-curated-phone { flex: 1 1 auto; min-width: 0; } /* CLS: Fluent Forms hides "hide_label" labels only once its late styles apply, so the form (and the vertically-centred copy column) jumped ~22px per field. Hide them accessibly from first paint and pin the control height to its settled value. */ .hns-upl-hero .ff-el-form-hide_label > .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hns-upl-hero.wpb_text_column input.ff-el-form-control, .hns-upl-hero.wpb_text_column select.ff-el-form-control, .hns-upl-hero .hns-curated-phone-country { height: 48px; box-sizing: border-box; } /* === end M113 === */