/* Turf Supply Partner - site enhancements Edit freely. Loaded by the "Turf Supply Partner - Site Enhancements" mu-plugin. */ :root{ --ts-green:#8CFF00; --ts-dark:#07100A; --ts-dark-2:#0E1A12; --ts-light:#F1F5EC; --ts-deep:#1A5B22; --ts-border:#D9E0D2; --ts-muted:#5C6660; } html{ scroll-behavior:smooth; scroll-padding-top:90px; } /* Guard against accidental sideways scroll. This must NOT go on : an overflow value there turns body into its own scroll container and stops window scroll events firing. `clip` also avoids that. */ html{ overflow-x:clip; } /* ---------- 1. Header: transparent over hero, dark once scrolled ---------- */ .ts-header{ position:fixed; top:0; left:0; right:0; z-index:999; transition:background-color .28s ease, box-shadow .28s ease; background-color:transparent !important; } /* Literal hex rather than a custom property: this rule must not depend on --ts-dark resolving on this element. */ .ts-header.ts-stuck{ background-color:#07100A !important; box-shadow:0 1px 0 rgba(255,255,255,.09); } /* Sentinel the script observes to detect "scrolled past the top" without depending on scroll events firing. */ .ts-scroll-sentinel{ position:absolute; top:0; left:0; width:1px; height:40px; /* overridden inline by the script to match its threshold */ pointer-events:none; visibility:hidden; } /* Both header groups size to their contents; the right group is pushed to the right edge so nav + CTA stay flush regardless of how wide the logo is. */ .ts-header .ts-logo{ width:auto !important; flex:0 0 auto; } .ts-header .ts-header-right{ width:auto !important; flex:0 0 auto; margin-left:auto; justify-content:flex-end; } .ts-logo{ text-decoration:none; } .ts-logo .ts-logo-mark img{ display:block; } .ts-header .ts-nav ul.hfe-nav-menu{ align-items:center; } /* keep the CTA visible next to the hamburger on small screens */ @media (max-width:1024px){ .ts-header-right{ gap:14px !important; } } @media (max-width:480px){ .ts-header .ts-btn-apply .elementor-button{ padding:12px 14px !important; font-size:11px !important; } .ts-header .ts-btn-apply .elementor-button-icon{ display:none; } } /* ---------- 2. Hero ---------- Note: phones use the 1280px variant, not a smaller one. The artwork is 2.33:1, so `cover` on a tall phone viewport scales to WIDTH, and a 768px file would be upscaled ~2.3x and look soft. The approved hero artwork is set on the section in Elementor as the uploaded PNG (media library ID 24). That original stays the configured asset and the declared fallback below; these rules only change the ENCODING delivered to the browser - same photograph, WebP instead of a 2.6 MB PNG, sized to the viewport. Replacing the artwork means replacing the Elementor setting AND regenerating these derivatives. */ .ts-hero{ background-image:url("/wp-content/uploads/2026/09/turf-warehouse-hero.png"); background-image:-webkit-image-set( url("/wp-content/uploads/2026/09/turf-warehouse-hero.webp") type("image/webp"), url("/wp-content/uploads/2026/09/turf-warehouse-hero.png") type("image/png")) !important; background-image:image-set( url("/wp-content/uploads/2026/09/turf-warehouse-hero.webp") type("image/webp"), url("/wp-content/uploads/2026/09/turf-warehouse-hero.png") type("image/png")) !important; } @media (max-width:1280px){ .ts-hero{ background-image:-webkit-image-set( url("/wp-content/uploads/2026/09/turf-warehouse-hero-1280.webp") type("image/webp"), url("/wp-content/uploads/2026/09/turf-warehouse-hero.png") type("image/png")) !important; background-image:image-set( url("/wp-content/uploads/2026/09/turf-warehouse-hero-1280.webp") type("image/webp"), url("/wp-content/uploads/2026/09/turf-warehouse-hero.png") type("image/png")) !important; } } @media (max-width:768px){ .ts-hero{ background-image:-webkit-image-set( url("/wp-content/uploads/2026/09/turf-warehouse-hero-1280.webp") type("image/webp"), url("/wp-content/uploads/2026/09/turf-warehouse-hero.png") type("image/png")) !important; background-image:image-set( url("/wp-content/uploads/2026/09/turf-warehouse-hero-1280.webp") type("image/webp"), url("/wp-content/uploads/2026/09/turf-warehouse-hero.png") type("image/png")) !important; } /* On a phone the copy sits over the whole frame, so add a vertical scrim on top of Elementor's left-to-right overlay to keep text readable. */ .ts-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(7,16,10,.75) 0%, rgba(7,16,10,.55) 45%, rgba(7,16,10,.85) 100%); } .ts-hero > *{ position:relative; z-index:1; } } .ts-accent{ color:var(--ts-green); } /* ---------- 2b. Partner form embeds (GoHighLevel / WebSEO) ---------- form_embed.js rewrites the markup into .ep-iFrameContainer > .ep-wrapper > iframe(position:absolute) but leaves both wrappers at height:0, so the iframe drops out of flow and its card collapses to just its padding. Giving the wrappers an explicit height puts the absolutely-positioned iframe back in a sized box. Both states are handled: the wrapped markup above, and the raw iframe for the case where the vendor script is blocked or has not run yet. */ /* Reserve the height on the Elementor widget only. form_embed.js manages the iframe's own position/size/visibility, including a 0-height .ep-wrapper with an absolutely positioned iframe - that is its normal working state. Earlier this stylesheet forced height and position onto those vendor wrappers to stop the card collapsing; that fought the script's own layout. Giving the widget a min-height gives the card its height without touching the vendor's internals. */ .ts-form-embed{ min-height:688px; } .ts-form-embed iframe{ border-radius:8px; } @media (max-width:1024px){ .ts-form-embed{ min-height:700px; } } @media (max-width:767px){ .ts-form-embed{ min-height:730px; } } /* Hero form card - white, rounded, elevated, floating over the artwork. */ .ts-hero-form{ align-self:center; } .ts-hero-copy{ min-width:0; } @media (max-width:767px){ /* Mobile order: headline, copy, CTA, then the form. */ .ts-hero-copy{ order:1; } .ts-hero-form{ order:2; } /* The hero is now ~1500px tall on a phone because it carries the form. `cover` on a 2.33:1 photo in a 0.25:1 box would crop to a ~10% vertical sliver of the image - unrecognisable. Render it as a band across the top at its natural proportions instead, biased right onto the turf rolls, and let solid dark carry the copy and form below it. */ .ts-hero{ background-size:auto 300px !important; background-position:72% top !important; background-repeat:no-repeat !important; background-color:#07100A !important; } .ts-hero::after{ background:linear-gradient(180deg, rgba(7,16,10,.45) 0px, rgba(7,16,10,.86) 190px, #07100A 300px); } } .ts-hero .ts-h1{ margin:0; } .ts-hero-cta .elementor-button{ transition:background-color .2s ease, color .2s ease, border-color .2s ease; } /* ---------- 3. Green trust bar ---------- */ .ts-greenbar .ts-bar-item{ margin:0; position:relative; } @media (min-width:768px){ .ts-greenbar .ts-bar-item:not(:last-child)::after{ content:""; position:absolute; right:-15px; top:50%; transform:translateY(-50%); width:1px; height:14px; background:rgba(7,16,10,.35); } } /* ---------- 4. Gap-aware card rows ---------- Elementor sets percentage widths on flex children; the container gap is added on top of that, which would push the last card onto a new line. These calcs subtract each row's share of the gap. */ .ts-card-row{ align-items:stretch; } /* Each width subtracts its share of the gap PLUS a couple of pixels of slack. Subtracting only the exact gap share makes the row total exactly 100%, and sub-pixel rounding then wraps the last item onto its own line. */ .ts-cards-2 > .e-con{ width:calc(50% - 14px) !important; } .ts-cards-3 > .e-con{ width:calc(33.333% - 15px) !important; } .ts-cards-4 > .e-con{ width:calc(25% - 17px) !important; } .ts-faq-grid > .e-con{ width:calc(50% - 12px) !important; } @media (max-width:1024px){ .ts-cards-4 > .e-con{ width:calc(50% - 10px) !important; } .ts-cards-3 > .e-con{ width:calc(50% - 10px) !important; } } @media (max-width:767px){ .ts-cards-2 > .e-con, .ts-cards-3 > .e-con, .ts-cards-4 > .e-con, .ts-faq-grid > .e-con{ width:100% !important; } } /* Split heading rows: big headline left, supporting paragraph right. Same slack rule as the card rows above - 54% + 46% - 56px gap came to exactly 100% and wrapped the paragraph onto its own line. */ /* Flex sizing rather than percentage widths: the boxed section's horizontal padding makes the inner width smaller than the container width, so a percentage + gap combination overflowed and wrapped the paragraph. */ .ts-split-head{ flex-wrap:nowrap; } .ts-split-head > .e-con{ width:auto !important; min-width:0; } .ts-split-head > .e-con:first-child{ flex:1 1 56%; } .ts-split-head > .e-con:last-child{ flex:0 1 38%; } @media (max-width:1024px){ .ts-split-head{ flex-wrap:wrap; } .ts-split-head > .e-con:first-child, .ts-split-head > .e-con:last-child{ width:100% !important; flex:1 1 100%; } } .ts-h2{ margin:0; } .ts-h3{ margin:0; } .ts-eyebrow{ margin:0; } .ts-para p:last-child{ margin-bottom:0; } .ts-legal{ max-width:860px; } /* Cards Equal height comes from the row's `align-items:stretch`, which only applies to items whose cross-size is auto. An explicit `height:100%` here opts the card OUT of stretching and makes it size to its own content instead - that was the cause of the mismatched card heights. Leave the height alone. */ .ts-card, .ts-feat-card, .ts-who-card, .ts-step, .ts-prod-card{ height:auto; align-self:stretch; } /* Bullet lists anchor to the bottom of the card so both lists finish on the same line, while the eyebrow, heading and paragraph stay top-aligned. */ .ts-card .ts-bullets{ margin-top:auto; } @media (max-width:767px){ /* Stacked cards should size to their content - stretching here would only add dead whitespace. */ .ts-card, .ts-feat-card, .ts-who-card, .ts-step, .ts-prod-card{ align-self:auto; } .ts-card .ts-bullets{ margin-top:0; } } /* Turf product cards link out to the Superior Turf Direct catalog. */ .ts-prod-card{ text-decoration:none; transition:background-color .18s ease, transform .18s ease; } .ts-prod-card:hover{ background-color:#132218 !important; transform:translateY(-2px); } .ts-prod-card .ts-card-link{ margin-top:auto; padding-top:6px; } .ts-prod-card .ts-card-link p{ margin-bottom:0; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .ts-prod-card .ts-card-link a{ color:#8CFF00; text-decoration:none; } .ts-prod-card .ts-card-link a:hover{ text-decoration:underline; } .ts-prod-card .ts-h3 a{ color:#FFFFFF; text-decoration:none; } .ts-prod-card:hover .ts-h3 a{ color:#8CFF00; } @media (prefers-reduced-motion:reduce){ .ts-prod-card:hover{ transform:none; } } .ts-feat-num{ margin:0; opacity:.55; } .ts-step-num{ margin:0; } .ts-bullets .elementor-icon-list-item{ align-items:flex-start; } .ts-bullets .elementor-icon-list-icon{ margin-top:4px; } /* Inventory band - cropped from the approved hero artwork (rolls only, no bay door) so it reads as a product/inventory detail rather than a repeat of the hero scene. Fixed height + object-fit keeps it a slim band at any width. */ .ts-inventory-band img{ display:block; width:100%; height:320px; object-fit:cover; object-position:center 55%; } @media (max-width:1024px){ .ts-inventory-band img{ height:250px; } } @media (max-width:767px){ .ts-inventory-band img{ height:180px; } } /* the marketing strip */ .ts-strip .ts-strip-title, .ts-strip .ts-strip-note{ margin:0; } @media (max-width:767px){ .ts-strip{ text-align:left; } } /* ---------- 5. Apply section ---------- */ .ts-section-apply > .e-con:first-child{ width:44%; } .ts-section-apply > .e-con.ts-form-card{ width:calc(56% - 56px); } @media (max-width:1024px){ .ts-section-apply > .e-con:first-child, .ts-section-apply > .e-con.ts-form-card{ width:100% !important; } } .ts-email-line a{ color:var(--ts-deep); font-weight:600; text-decoration:underline; } .ts-email-line a:hover{ color:var(--ts-dark); } /* ---------- 6. FormLayer: two-column grid + industrial styling ---------- */ .ts-form .formlayer-form-fields-wrapper{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 16px; margin-top:6px; } .ts-form .ts-col-6{ grid-column:span 1; } .ts-form .ts-col-12, .ts-form .formlayer-submit-wrap, .ts-form .formlayer-form-status{ grid-column:1 / -1; } @media (max-width:600px){ .ts-form .formlayer-form-fields-wrapper{ grid-template-columns:1fr; } .ts-form .ts-col-6{ grid-column:1 / -1; } } .ts-form .formlayer-label{ display:block; margin-bottom:7px; font-family:Inter, sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ts-dark); } .ts-form .required-indicator{ color:var(--ts-deep); margin-left:3px; } .ts-form .formlayer-input{ width:100%; box-sizing:border-box; padding:13px 14px; font-family:Inter, sans-serif; font-size:15px; color:var(--ts-dark); background:#FBFCF9; border:1px solid var(--ts-border); border-radius:0; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } .ts-form .formlayer-input::placeholder{ color:#A3ADA5; } .ts-form .formlayer-input:focus{ outline:none; background:#fff; border-color:var(--ts-deep); box-shadow:0 0 0 3px rgba(26,91,34,.12); } .ts-form select.formlayer-input{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ts-dark) 50%),linear-gradient(135deg,var(--ts-dark) 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px; } .ts-form textarea.formlayer-input{ resize:vertical; min-height:110px; } .ts-form .formlayer-help-text{ margin-top:6px; font-size:12px; color:#8A948C; } .ts-form .formlayer-gdpr-wrap{ display:flex; align-items:flex-start; gap:10px; } .ts-form .formlayer-gdpr-wrap input[type=checkbox]{ margin-top:3px; width:16px; height:16px; accent-color:var(--ts-deep); flex:0 0 auto; } .ts-form .formlayer-gdpr-label{ font-family:Inter, sans-serif; font-size:13px; line-height:1.55; color:var(--ts-muted); } .ts-form .formlayer-submit-wrap{ margin-top:4px; } .ts-form .formlayer-submit-btn{ width:100%; cursor:pointer; padding:18px 26px; border:0; border-radius:0; font-family:Inter, sans-serif; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:background-color .18s ease, color .18s ease; } .ts-form .formlayer-submit-btn:hover{ background-color:var(--ts-green) !important; color:var(--ts-dark) !important; } .ts-form .formlayer-form-status:not(:empty){ padding:13px 15px; margin-bottom:4px; font-family:Inter, sans-serif; font-size:14px; line-height:1.55; border-left:4px solid var(--ts-deep); background:#EEF5EA; color:var(--ts-dark); } /* ---------- 7. FAQ accordion ---------- */ .ts-faq .elementor-accordion .elementor-accordion-item{ margin-bottom:12px; } .ts-faq .elementor-tab-title{ transition:color .15s ease; } /* ---------- 8. Footer ---------- */ .ts-footer-note p:last-child, .ts-footer-email p:last-child, .ts-copyright p:last-child{ margin-bottom:0; } .ts-footer-email a{ color:var(--ts-green); text-decoration:none; } .ts-footer-email a:hover{ text-decoration:underline; } .ts-footer-rule{ padding:0; } /* ---------- 9. Mobile / tablet header + buttons ---------- */ /* UAE collapses the menu with visibility:hidden, which still reserves the list's full width in the flex row. That squeezed the CTA's container until the button overflowed and was clipped. Taking the collapsed list out of flow frees the space and turns it into a proper full-width dropdown. */ @media (max-width:1024px){ /* descendant, not child: UAE nests the list inside a