/* Theme Name: Salient Child Theme Description: This is a custom child theme for Salient Theme URI: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266 Author: ThemeNectar Author URI: https://themeforest.net/user/themenectar Template: salient Version: 1.0 */ /* === wordpress-automation universal overrides v1 === */ /* --------------------------------------------------------------------- * Salient full-width section edge gap fix * Source: reference/best-practices.md -> "Salient Full-Width Section Edge Gap" * * Salient computes --scroll-bar-w in JS and applies it to full-width * rows. On Windows with DPI scaling the measurement can be wrong, * leaving a ~3-5px gap on both edges of every full-width section. This * override forces true viewport width; html/body overflow-x:hidden * clips any sub-pixel overshoot invisibly. * --------------------------------------------------------------------- */ body .full-width-section .row-bg-wrap, body .full-width-section > .nectar-shape-divider-wrap, body .full-width-section > .video-color-overlay { width: 100vw !important; margin-left: -50vw !important; } /* === forknhoe build v1 === */ /* Shared classes for the Phase 4 WPBakery build. Values hardcoded from * visual-mockup-final-content-v3 tokens (no CSS vars in child theme). * Convention: rows on dark BGs (hero/sub-hero/Forest bands) carry * el_class="fnh-inverse" — flips eyebrow to Grass and titles to white. */ .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2a7d2f; margin: 0 0 16px; display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; flex: none; width: 36px; height: 2px; background: currentColor; } .fnh-inverse .eyebrow { color: #73cd55; } .disp-title { display: block; font-size: clamp(28px, 3vw, 46px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; color: #124a2f; margin: 0 0 16px; } .fnh-inverse .disp-title { color: #ffffff; } .fnh-inverse h1 span { color: #73cd55; } /* Card CONTAINER styling (.fnh-tile / .fnh-tile--mist / .fnh-material) migrated to native column settings 2026-07-20 — background_color, column_border_* , column_shadow, column_padding=padding-3-percent, row column_margin=25px. Only content typography (below), the fnh-material LEFT accent border, and img object-fit remain CSS (no native path). */ .fnh-tile .disp-title { font-size: 22px; letter-spacing: -0.005em; line-height: 1.25; margin-bottom: 16px; } .fnh-tile p, .fnh-tile ul { font-size: 15px; line-height: 1.6; } .fnh-tile ul { margin: 16px 0 0; padding-left: 20px; list-style: disc; } .fnh-stat { /* v22 2026-08-03: was clamp(80px, 3.6vw, 60px). The min EXCEEDED the max, and per spec clamp() then returns the min, so this was a flat 80px at every width and the 3.6vw never applied. At 80px the numbers overflowed their column and "500+" / "100%" collided with the next column by 13-18px on Home at 1440px. The binding width is 1000px, not 1440px: that is where Salient switches to the 5-across desktop row and the columns are narrowest: clearance drops from ~150px at 990px to a hair at 1000px. 4vw leaves ~8px there, cap 68px keeps large screens from ballooning, floor 40px covers the 691-999px band. Verified 320-1920px, both pages. */ font-size: clamp(40px, 4vw, 68px); font-weight: 700; line-height: 0.95; letter-spacing: -0.025em; color: #ffffff; } .fnh-stat em { color: #73cd55; font-style: normal; font-weight: 700; } .fnh-stat-text>p { text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); } /* === forknhoe build v2 additions === */ .fnh-step { font-size: clamp(72px, 8vw, 120px); font-weight: 600; line-height: 0.85; color: #124a2f; letter-spacing: -0.03em; } .fnh-inverse .disp-title span { color: #73cd55; } .fnh-chips { display: block; } .fnh-chips span:not(.disp-title), .fnh-chips a:not(.disp-title) { display: inline-block; border: 1px solid #d9d3cb; border-radius: 6px; padding: 6px 14px; font-size: 14px; margin: 4px 4px 0; } .fnh-chips>span { background: #eef3ea; color: #124a2f; font-weight: 600; } /* === forknhoe build v3 additions (footer) === */ .fnh-footer-col h5 { text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; } .fnh-footer-col ul { list-style: none; margin-left: 0; padding-left: 0; } .fnh-footer-col ul li { margin: 0 0 10px; } .fnh-footer-col a { color: #f1ece6; } .fnh-footer-col a:hover { color: #73cd55; } /* === forknhoe build v4 additions === */ .fnh-card .disp-title { font-size: 22px; } /* === forknhoe build v5 additions === */ .fnh-chips span:not(.disp-title) a { color: inherit; text-decoration: none; } .fnh-chips span:not(.disp-title) a:hover { color: #2a7d2f; } .fnh-inverse .disp-title em { color: #73cd55; font-style: normal; font-weight: 400; } .fnh-tile .eyebrow::before { display: none; } /* === forknhoe build v6 — compare markers === */ /* Native icon elements don't render glyphs in this build (FA glyph CSS absent, * nectar_icon output unreliable). The mockup builds these ✕/✓ marks with * ::before, so we reproduce that exactly. Unicode glyphs = no icon-font dep. */ .fnh-compare-bad ul, .fnh-compare-good ul { list-style: none !important; margin: 16px 0 0; padding-left: 0; } .fnh-compare-bad li, .fnh-compare-good li { position: relative; list-style: none !important; padding-left: 30px; margin-bottom: 12px; line-height: 1.45; } .fnh-compare-bad li::before, .fnh-compare-good li::before { position: absolute; left: 0; top: 0; font-weight: 700; } .fnh-compare-bad li::before { content: "\2715"; color: #b08a5e; } .fnh-compare-good li::before { content: "\2713"; color: #73cd55; } /* v7 tile box-correction CSS removed 2026-07-20 — bg/radius/border/padding/shadow now native. */ /* === forknhoe build v8 — material tile: bg/radius/padding now native; LEFT accent border stays CSS (Salient column_border is all-sides only, no native single-side option) === */ /* v35: the border must sit on the SAME element as the card fill. Salient paints the card bg on the inset .column-bg-overlay (~6px in from the .wpb_column wrapper); putting the border on the wrapper left a 6px gap between the green accent and the card. Move it onto the overlay so the accent is flush with the card edge (overlay is absolutely positioned → no content shift). */ .fnh-material .column-bg-overlay { border-left: 4px solid #124a2f; } /* v10 FAQ accordion chrome REMOVED 2026-07-21 (Matt) — the custom CSS was fighting Salient's 'minimal_small' (Inline Small) toggle, which renders the header inline (~63% width) → the half-width +/- and underline. FAQs now use Salient's NATIVE toggle style (no child CSS). */ /* v36: the ONLY FAQ rule kept — a PARTIALLY-TRANSPARENT white background over the toggles so a decorative row motif behind them (e.g. the double-leaf on landscaping-services) is muted to a faint watermark instead of bleeding through the FAQ text (Matt). Salient's minimal_shadow leaves CLOSED toggles transparent with no per-toggle bg param, so this one readability rule is required; it doesn't restyle the native chrome. */ .toggles .toggle { background: rgba(255, 255, 255, 0.85); } /* === forknhoe build v10 — mockup parity pass 1 (eyebrow) === */ /* Ported from mockup components-final.css / tokens-final.css; deltas measured by scripts/mockup-parity.js. Rule: mockup wins (Matt 2026-07-18). */ .eyebrow { color: #2a7d2f; } /* mockup base eyebrow = forest #124a2f (build had flax #2a7d2f) */ h2.eyebrow { line-height: 1.2; } /* mockup eyebrow lh 1.2 (build inherited Salient h2 leading ~52px) */ /* === forknhoe build v11 — mockup parity pass 2 (buttons: no native option) === */ /* nectar_btn has NO uppercase/letter-spacing/radius param and there is no button typography theme option (checked reference/salient-elements + theme-options) → child CSS is the only mechanism. Mockup .btn: uppercase, 0.08em tracking, 6px radius. */ .nectar-button { text-transform: uppercase; letter-spacing: 0.08em; border-radius: 6px; } /* Fix CSS bleed: the .fnh-chips chip-border rule was hitting the nectar button's inner text span → a spurious second border. Neutralise it on button spans. */ .fnh-chips a.nectar-button span { border: 0; border-radius: 0; padding: 0; margin: 0; font-size: inherit; } /* === forknhoe build v12 — button specificity + image object-fit === */ /* Salient sets nectar-button text-transform:none + border-radius:4px with higher specificity → need !important to reach the mockup (uppercase, 6px). */ .nectar-button { text-transform: uppercase !important; border-radius: 6px !important; } /* fancy_box / tile images render object-fit:fill (distorted) → mockup uses cover */ .nectar-fancy-box img, .fnh-tile img, .nectar-fancy-box-image-wrap img { object-fit: cover !important; } /* === forknhoe build v13 — component h3 weight + blog h3 colour === */ /* Mockup component h3s are weight 600 (Salient default 400). Uniform across service tiles, project cards, process steps, blog. */ /* blog + process h3 render ink #1a1617; mockup = forest */ .fnh-tile h3 { color: #124a2f; } /* === forknhoe build v14 — eyebrow bottom gap === */ /* Salient's h2 margin collapses the eyebrow→title gap to 10px; mockup = 16px. */ .eyebrow { margin-bottom: 16px !important; } /* === forknhoe build v15 — parity pass 3 (disp-title context sizes, work-card h3, blog h3 weight) === */ /* disp-title per-context: split intros 40px, statement 60px (build global clamp = 46px). Responsive clamp preserves mobile. */ .disp-title.fnh-dt-40 { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.18; } .disp-title.fnh-dt-60 { font-size: clamp(34px, 4vw, 60px) !important; line-height: 1.1; } /* recent-work project-card raw h3: mockup 20px/26px (build inherited 24px) */ .fnh-work-h3 { font-size: 20px !important; line-height: 26px !important; } /* blog card titles: mockup weight 400 (v13 .wpb_wrapper h3 forces 600 globally) */ .wpb_wrapper h3.fnh-blog-h3, .fnh-blog-h3 h3, h3.fnh-blog-h3 { font-weight: 400 !important; } /* === forknhoe build v16 — button box parity (mockup .btn: padding 15/30, 1px border, centered) === */ /* radius already fixed globally via Redux button-styling-roundness 6. Here: padding + border-width + align. */ .nectar-button.regular, .nectar-button.see-through-2 { padding: 15px 30px !important; } .nectar-button.see-through-2 { border-width: 1px !important; } /* solid buttons: mockup has a 1px border; transparent over the fill = no visual change, width reads 1px */ .nectar-button.regular { border: 1px solid transparent !important; } .nectar-button { text-align: center; } /* === forknhoe build v17 — button text-align correction (mockup buttons are start, not center) === */ .nectar-button { text-align: start !important; } /* === forknhoe build v18 — eyebrow forest in forest-context sections (mockup .eyebrow--ink / .split-grid__text h2) === */ /* plain .eyebrow stays flax on white bands (matches mockup); --ink marks the forest ones */ .eyebrow--ink { color: #124a2f; } /* === forknhoe build v19 — blog card thumbnail crop (image_with_animation renders object-fit:fill in equal-height cards; mockup = cover) === */ .fnh-blog-img img, img.fnh-blog-img { object-fit: cover !important; } /* === forknhoe build v20 — generic parity utility classes (for raw-HTML headings across all pages) === */ /* vc_custom_heading should use font_container for size/lh/colour; these are ONLY for raw /

in HTML content. */ .disp-title.fnh-dt-34 { font-size: clamp(26px, 2.4vw, 34px) !important; line-height: 1.15; } .disp-title.fnh-dt-44 { font-size: clamp(28px, 3.2vw, 44px) !important; line-height: 1.12; } .fnh-h3-20 { font-size: 20px !important; line-height: 26px !important; } .fnh-h3-21 { font-size: 21px !important; line-height: 27px !important; } .fnh-h3-24 { font-size: 24px !important; line-height: 31px !important; } .fnh-h3-28 { font-size: 28px !important; line-height: 36px !important; } /* === forknhoe build v21 — forest primary button + disp-title-60 tracking === */ /* mockup .btn--primary is forest #124a2f; Salient solid nectar_btn uses the flax accent. Apply el_class="fnh-btn-forest". */ .nectar-button.fnh-btn-forest, a.nectar-button.fnh-btn-forest { background-color: #124a2f !important; border-color: #124a2f !important; } .nectar-button.fnh-btn-forest:hover { background-color: #0d3a25 !important; border-color: #0d3a25 !important; } /* fnh-dt-60 tracking: mockup -1.2px at 60px (base .disp-title -0.01em only gives -0.6px) */ .disp-title.fnh-dt-60 { letter-spacing: -0.02em !important; } /* === forknhoe build v21b — forest button specificity fix (Salient .accent-color is #page-container-scoped) === */ #page-container a.nectar-button.fnh-btn-forest { background-color: #124a2f !important; border-color: #124a2f !important; } #page-container a.nectar-button.fnh-btn-forest:hover { background-color: #0d3a25 !important; border-color: #0d3a25 !important; } /* === forknhoe build v21c — forest button: out-specify Salient's #page-container .nectar-button.accent-color === */ #page-container a.nectar-button.accent-color.fnh-btn-forest, #page-container a.nectar-button.regular.fnh-btn-forest { background-color: #124a2f !important; border-color: #124a2f !important; } #page-container a.nectar-button.accent-color.fnh-btn-forest:hover, #page-container a.nectar-button.regular.fnh-btn-forest:hover { background-color: #0d3a25 !important; border-color: #0d3a25 !important; } /* === forknhoe build v26 — CF7 submit button to mockup (forest, uppercase, 15/30) === */ /* Salient styles the submit via body[data-form-submit] .container-wrap button[type=submit] (padding !important); match that specificity + !important to win bg/padding/transform. */ body[data-form-submit] .container-wrap input.wpcf7-submit.fnh-submit, body .container-wrap input.wpcf7-submit.fnh-submit { background-color: #124a2f !important; padding: 15px 30px !important; text-transform: uppercase !important; letter-spacing: 0.08em; } body[data-form-submit] .container-wrap input.wpcf7-submit.fnh-submit:hover, body .container-wrap input.wpcf7-submit.fnh-submit:hover { background-color: #0d3a25 !important; } /* === forknhoe build v27 — footer "Request a quote" is mockup .btn--sm (11/22, 12px) === */ /* The global .nectar-button.regular rule (v16) supplies the shared 15/30 for body CTAs (mockup default .btn). The footer button uses .btn--sm in the mockup — an explicit small exception. Mirror that natively: nectar_btn el_class="fnh-btn-sm" + this one-time override. Specificity (0,3,0) + source order beats .nectar-button.regular (0,2,0). */ /* text-transform: Salient forces `.nectar-button.medium{text-transform:none!important}` (0,2,0); this (0,3,0) beats it so the medium footer button reads uppercase like the mockup btn. */ .nectar-button.regular.fnh-btn-sm, a.nectar-button.regular.fnh-btn-sm { padding: 11px 22px !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* === forknhoe build v28 — small-text utility classes (special-case sizing, approved 2026-07-19) === */ /* WPBakery exposes no per-block font-size for multi-line body text (vc_column_text/fancy_box); these mirror the mockup tokens: --fs-lead 20px/lh1.55, service-card desc 13.5px, compare h4 300. */ .fnh-lead, .fnh-lead p { font-size: 20px !important; line-height: 31px !important; } .fnh-desc, .fnh-desc p { font-size: 13.5px !important; line-height: 21px !important; } /* compare-col headings: converted to native vc_custom_heading google_fonts (weight 300) — CSS weight rule + its dangling h3.vc_custom_heading selector removed (was orphaning into the footer rule). */ /* === forknhoe build v29 — footer typography to mockup (global; approved 2026-07-19) === */ /* Footer is a custom global-section (fnh-footer-col), not Salient's widget footer, so theme options don't reach it. Mockup: nav links 14px/lh22.68; column h5 titles 15px/lh24.3 UPPERCASE ls1.2. Salient forces h5 transform:none with higher specificity → !important. Clears the footer cluster (~links + titles) on ALL 19 pages. */ .fnh-footer-col a { font-size: 14px !important; line-height: 22.68px; } .fnh-footer-col h5, .fnh-footer-col h5.vc_custom_heading { font-size: 15px !important; line-height: 24.3px !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; } /* === forknhoe build v31 — small labels + muted secondary text (approved 2026-07-19) === */ /* Project-card overlines / trust-strip / blog meta: mockup ~11px/400/uppercase (build renders 17px/600). */ .fnh-label { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; line-height: 1.4 !important; } /* Muted secondary text (testimonial locations, captions): mockup #5a5450 (build renders #1a1617). */ .fnh-muted { color: #5a5450 !important; } /* === forknhoe build v30 — global object-fit for content images (replaces per-image fnh-blog-img) === */ /* image_with_animation renders object-fit:fill (distorted) in equal-height/fixed-ratio card contexts; mockup = cover. Target .img-with-animation ONLY so site/mobile logos (also fill) are untouched. No el_class needed — restores object-fit on all pages with one rule. */ img.img-with-animation { object-fit: cover !important; } /* === forknhoe build v32 — footer parity: bullets, body-copy size, bottom-bar rule (2026-07-21) === */ /* Mockup .ftr: (1) nav lists have NO bullets — Salient sets list-style:disc on the
  • directly, so the existing `.fnh-footer-col ul` rule never reaches it via inheritance; target the
  • . (2) brand blurb + contact copy 14px (build inherits body 17px) — set on .wpb_text_column so it applies whether or not the text is wrapped in

    . (3) bottom bar (.fnh-footer-bottom-col) 12.5px + a 10%-white hairline rule above: the native Full Width Line divider is present but its wrap renders at opacity ~0.002 (divider_opacity="0.2" mis-scaled — Salient's scale is 0–100), so force it visible at the mockup's rgba(255,255,255,0.1). */ .fnh-footer-col ul li { list-style: none !important; } .fnh-footer-col .wpb_text_column { font-size: 14px; line-height: 1.6; } .fnh-footer-bottom-col .wpb_text_column, .fnh-footer-bottom-col .wpb_text_column a { font-size: 12.5px !important; line-height: 20.25px !important; } .fnh-footer-bottom-col .divider-wrap { opacity: 1 !important; } .fnh-footer-bottom-col .divider-border { background: rgba(255, 255, 255, 0.1) !important; } /* === forknhoe build v33 — quote/contact green-panel body 15px (mockup) === */ /* The aside panel body inherits the global 17px; mockup panel body = 15px/lh~1.6. No native per-block font-size lever for vc_column_text, so scope to the panel. Titles/eyebrows are vc_custom_heading (not p/li) so unaffected. */ .fnh-aside p, .fnh-aside li { font-size: 15px; line-height: 1.6; } /* === forknhoe build v34 — home hero quote form (CF7 101) === */ /* Hero form sits on the dark forest hero card. CF7 has no native lever for pill radios, the fine-print/badge, a full-width submit, or paired fields — scoped CSS. Everything is namespaced to .fnh-hero-form so no other form is touched. */ .fnh-field-row { display: flex; gap: 14px; } .fnh-field-row > p { flex: 1; margin-bottom: 0; } /* full-width flax submit (mockup .btn--accent.btn--block: flax, uppercase, 6px, 15/30) */ body .container-wrap .fnh-hero-form input.wpcf7-submit.fnh-hero-submit { width: 100%; display: block; background-color: #2a7d2f !important; color: #fff !important; text-transform: uppercase !important; font-size: 13px; font-weight: 600; letter-spacing: 1.04px; border-radius: 6px; padding: 15px 30px !important; border: none; } body .container-wrap .fnh-hero-form input.wpcf7-submit.fnh-hero-submit:hover { background-color: #24692a !important; } /* radio pills: hide the native radio, style the wrapped label as a pill (use_label_element) */ .fnh-hero-form .wpcf7-radio { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .fnh-hero-form .wpcf7-radio .wpcf7-list-item { margin: 0; } .fnh-hero-form .wpcf7-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .fnh-hero-form .wpcf7-radio .wpcf7-list-item-label { display: inline-block; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px; color: rgba(255,255,255,0.85); font-size: 12.5px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .fnh-hero-form .wpcf7-radio input:checked + .wpcf7-list-item-label { background: #124a2f; border-color: #73cd55; color: #73cd55; } /* fine print + badge (mockup .quote-card__fine / __badge) */ /* tighten the submit

    wrapper (Salient p-margin made submit->fine ~46px; mockup = 20px) */ .fnh-hero-form p:has(input.wpcf7-submit) { margin: 0 0 20px; } /* the CF7 ajax spinner wraps to a new line under the full-width button (+~28px); mockup has none, so collapse it (form still submits + shows the success/error message). */ .fnh-hero-form .wpcf7-spinner { display: none; } .fnh-hero-form .quote-card__fine { color: rgba(255,255,255,0.6); font-size: 12px; line-height: 1.4; margin: 0; padding: 0; text-align: center; } .fnh-hero-form .quote-card__badge { color: #73cd55; font-size: 12px; font-weight: 600; line-height: 1.4; margin: 10px 0 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .fnh-hero-form .quote-card__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #73cd55; display: inline-block; flex: none; animation: fnhPulse 2s ease-out infinite; } @keyframes fnhPulse { 0% { box-shadow: 0 0 0 0 rgba(115,205,85,0.55); } 70% { box-shadow: 0 0 0 9px rgba(115,205,85,0); } 100% { box-shadow: 0 0 0 0 rgba(115,205,85,0); } } .fnh-hero-form p>label { color: rgba(255, 255, 255, 0.62); text-transform: uppercase; font-size: 11px !important; } .fnh-hero-form .quote-card__fine { color: rgba(255, 255, 255, 0.62) !important; } .span_12.light input[type=text]:focus { border-color: #73cd55 !important; } .fnh-scrolling-row .nectar-scrolling-text-inner__text-chunk { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, 0.92); } /* === forknhoe build v37 — consistent card hover (mockup) === White/feature cards (fnh-tile, fnh-tile--mist) lift + gain a larger shadow; sand "material" tiles (fnh-material) invert to a forest bg with light text + grass accent border. Shadow sits on .vc_column-inner, card fill/border on Salient's .column-bg-overlay. Info panels (fnh-card), compare + inverse contexts are intentionally excluded. */ .fnh-tile.wpb_column, .fnh-tile--mist.wpb_column, .fnh-material.wpb_column { transition: transform .22s ease; } .fnh-tile .vc_column-inner, .fnh-tile--mist .vc_column-inner { transition: box-shadow .22s ease; } .fnh-material .column-bg-overlay { transition: background-color .22s ease, border-color .22s ease; } .fnh-material .vc_column-inner h1, .fnh-material .vc_column-inner h2, .fnh-material .vc_column-inner h3, .fnh-material .vc_column-inner h4, .fnh-material .vc_column-inner p, .fnh-material .eyebrow { transition: color .22s ease; } /* white / feature cards: lift + larger shadow (sh-lg) */ .fnh-tile.wpb_column:hover, .fnh-tile--mist.wpb_column:hover { transform: translateY(-4px); } .fnh-tile.wpb_column:hover .vc_column-inner, .fnh-tile--mist.wpb_column:hover .vc_column-inner { box-shadow: 0 26px 60px rgba(7, 42, 31, 0.28) !important; } /* sand material tiles: invert to forest + light text */ .fnh-material.wpb_column:hover { transform: translateY(-4px); } .fnh-material.wpb_column:hover .column-bg-overlay { background-color: #124a2f !important; border-left-color: #73cd55 !important; } .fnh-material.wpb_column:hover .vc_column-inner h1, .fnh-material.wpb_column:hover .vc_column-inner h2, .fnh-material.wpb_column:hover .vc_column-inner h3, .fnh-material.wpb_column:hover .vc_column-inner h4 { color: #ffffff !important; } .fnh-material.wpb_column:hover .vc_column-inner p { color: #f1ece6 !important; } .fnh-material.wpb_column:hover .eyebrow { color: #73cd55 !important; } /* === forknhoe build v38 — process cards (mockup .process-step) === */ /* Process step cards have no fnh-* class; identify them by the .fnh-step number they contain. PC-WRAP = the card content wrapper (its direct-child .wpb_text_column holds the number). PC-COL = the step column (scoped so ANCESTOR wrappers don't also match). */ /* (1) number INLINE to the LEFT of the title+desc (mockup: grid auto/1fr, not stacked) */ .vc_column-inner > .wpb_wrapper:has(> .wpb_text_column .fnh-step) { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; align-items: center; } .vc_column-inner > .wpb_wrapper:has(> .wpb_text_column .fnh-step) > :nth-child(1) { grid-row: 1 / span 2; align-self: center; margin: 0 !important; } .vc_column-inner > .wpb_wrapper:has(> .wpb_text_column .fnh-step) > :nth-child(2) { grid-column: 2; grid-row: 1; } .vc_column-inner > .wpb_wrapper:has(> .wpb_text_column .fnh-step) > :nth-child(3) { grid-column: 2; grid-row: 2; } /* (2) forest-invert hover (mockup .process-step:hover): bg forest, num grass, title white, desc sand */ .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step) { transition: transform .22s ease; } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step) .column-bg-overlay { transition: background-color .22s ease; } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step) .fnh-step, .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step) h3, .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step) p { transition: color .22s ease; } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step):hover { transform: translateY(-4px); } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step):hover .column-bg-overlay { background-color: #124a2f !important; } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step):hover .fnh-step { color: #73cd55 !important; } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step):hover h3 { color: #ffffff !important; } .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column .fnh-step):hover p { color: #f1ece6 !important; } .file-upload-careers { box-sizing: border-box; padding: 15px 25px; height: auto; width: 100%; position: relative; outline: 0; border: solid 1px #d9d3cb; margin: 0; background: white; margin-bottom: 30px; transition: all .4s; line-height: 1.1em; border-radius: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .file-upload-careers .wpcf7-file::file-selector-button { background-color: #2a7d2f; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 6px; margin-top: 10px; margin-right: 10px; font-family: Montserrat; text-transform: none !important; font-size: 14px; font-weight: 400; } /* === forknhoe build v20 - mobile breakpoint block (first responsive pass, 2026-08-03) === Everything above this line was written desktop-only: until v20 this stylesheet contained ZERO @media rules. Salient injects !important heading sizes below 999px in salient-dynamic-styles.css, so .eyebrow (12px, no !important) lost to .wpb_wrapper h2.vc_custom_heading (37px <=999px, 35px <=690px) on every phone and tablet. Anything correcting a Salient !important rule must carry !important AND out-specify it. Measured across 15 pages at 390px. */ /* --- M1: eyebrows. 125 instances were rendering at 35px against a 12px design, larger than the headings they label, with long ones clipping off screen. --- */ @media only screen and (max-width: 999px) { .eyebrow, .wpb_wrapper h2.vc_custom_heading.eyebrow, .wpb_wrapper h2.vc_custom_heading.eyebrow--ink { font-size: 12px !important; line-height: 1.2 !important; } } /* --- M2: quote-form paired rows stack. Two fields at 141px each on a 390px screen is unusable. Used by the quote form (214) and the home hero form (101). Dropped to display:block rather than flex-wrap: wrapping kept the 14px flex gap inside each row while .fnh-field-row > p { margin-bottom: 0 } removed it between rows, measuring 45px / 5px / 45px / 5px against the 31px the rest of the form uses. As a block the fields inherit the normal paragraph rhythm and match. --- */ @media only screen and (max-width: 690px) { .fnh-field-row { display: block; margin-bottom: 26px; } .fnh-field-row > p { margin-bottom: 0; } } /* --- M3: iOS Safari zooms the viewport when a focused field is under 16px. All 11 quote-form inputs were 13.3-15px. Scoped to every CF7 form on the site (hero, quote, contact, careers). Submit buttons deliberately excluded. --- */ @media only screen and (max-width: 782px) { .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 input[type="search"], .wpcf7 input[type="password"], .wpcf7 input[type="file"], .wpcf7 select, .wpcf7 textarea { font-size: 16px !important; } } /* === forknhoe build v21 - stat strip sizing on phone (2026-08-03) === The stat numbers rendered at 80px inside a 132px column on Home, so "500+" (196px) and "100%" (202px) overflowed their own card. Cause: .fnh-stat is set to clamp(80px, 3.6vw, 60px), where the min EXCEEDS the max. Per spec clamp() returns the min in that case, so it resolved to a flat 80px at every viewport and the responsive intent never took effect. Desktop is deliberately left on that value here; this block only corrects phone. See the note in the audit before changing the base rule, because fixing the clamp properly would move desktop too. vc_column_text and vc_custom_heading have no per-breakpoint font-size param, so this is one of the genuinely native-less cases in salient-native-styling.md. */ @media only screen and (max-width: 690px) { /* 14.1vw = 55px at 390px. Clamped so a 320px phone steps down rather than overflowing, and a 690px phablet caps at 55px instead of ballooning. */ .fnh-stat { font-size: clamp(36px, 14.1vw, 55px); line-height: 1; } /* Labels were 13px on Home (.fnh-stat-text > p) but 17px on About Us, whose column carries no el_class so no rule reached it. Match them on phone by targeting the text column that actually contains a stat. Size only: each page keeps its own casing and letter-spacing. */ .wpb_text_column:has(.fnh-stat) p { font-size: 12px; line-height: 1.4; } } /* === forknhoe build v23 - eyebrow alignment on phone (2026-08-03) === Salient's column param desktop_text_alignment="center" emits the class .force-desktop-text-align-center, and its rule is `text-align:center !important` inside an `only screen, print` block - so it applies at EVERY width, not just desktop, despite the name. That beats the column's own phone_text_alignment AND the heading's inline font_container align, so there is no native way to centre a section on desktop and left-align it on a phone. Hence CSS, scoped to phone and to the eyebrow only: the section title stays centred as designed. Why it matters visually: .eyebrow is display:inline-flex with a ::before dash. When the text is long enough to fill the line the box spans full width, the dash pins to the left edge and centred text floats away from it. */ @media only screen and (max-width: 690px) { .wpb_column.force-desktop-text-align-center .eyebrow, .wpb_column.force-desktop-text-align-center h2.eyebrow { text-align: left !important; } } /* === forknhoe build v24 - tame the 100px stacked-column margin below 999px (2026-08-03) === Salient emits, in its dynamic inline styles: @media only screen and (max-width: 999px) { .vc_row-fluid[data-column-margin="100px"] .wpb_column:not([class*="vc_col-xs-"]) :not(.child_column):not(:last-child), .inner_row[data-column-margin="100px"] .child_column:not([class*="vc_col-xs-"]) :not(:last-child) { margin-bottom: 100px; } } column_margin="100px" is meant as a DESKTOP gutter between side-by-side columns. Once the columns stack it becomes a 100px vertical hole, and it fires on 21 columns across 14 pages - the gap under the "View all services" button on the home page is one. Set to 0 first, and all 21 then measured a 0px gap: the 100px WAS the only separation, nothing underneath supplies its own. So 35px, matching the phone row-padding standard used across the build, rather than 0. Scoped to the same max-width:999px the rule uses, not just phone, so the 691-999px band does not keep a 100px hole the phone no longer has. !important because the original selector runs about (0,6,0) and matching that literally is brittle. */ @media only screen and (max-width: 999px) { .vc_row-fluid[data-column-margin="100px"] .wpb_column:not([class*="vc_col-xs-"]):not(.child_column):not(:last-child), .inner_row[data-column-margin="100px"] .child_column:not([class*="vc_col-xs-"]):not(:last-child) { margin-bottom: 35px !important; } } /* ===================================================================== * ForknHoe - Header bottom gradient border (solid state only) * * Ported from the Kingstone+ build (kingstoneandassociates.co.nz), which * runs the same mechanism in blue->purple. Same structure, Fork's greens: * #73CD55 -> #2A7D2F as a 2px bottom border on the header once it is in * its solid (non-transparent) state. * * Why a pseudo-element and not border-bottom: a real border would add * 2px to the header's box and shift the shrink-on-scroll maths that * data-header-resize="1" drives. An absolutely-positioned ::after sits * inside the existing box and costs no height. * * Why the opacity transition rather than toggling the gradient: this * header is data-transparency-option="1" and carries .transparent at the * top of the page, so a hard on/off would pop at the moment Salient * swaps the class. Fading on the same 0.35s the header already uses * makes it arrive with the background rather than after it. * ===================================================================== */ #header-outer { /* Salient draws its own 1px line here from data-box-shadow="large-line". Left alone, that line sits under the gradient and reads as a smudge on the light header state. Suppressed so the gradient is the only border. */ box-shadow: none !important; } #header-outer::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #73CD55, #2A7D2F); opacity: 1; transition: opacity 0.35s ease; pointer-events: none; /* Must beat Salient's #top (z-index 9998), which otherwise paints over the header's bottom edge and clips the strip to nothing. */ z-index: 9999; } /* Transparent state is the top-of-page hero overlay. No border there, or it draws a line across the hero image with no header behind it. */ #header-outer.transparent { box-shadow: none !important; } #header-outer.transparent::after { opacity: 0; }