/* Theme Name: Soil Depot Child Theme URI: https://soil-depot.com Description: Child theme for Soil Depot. Holds site-specific custom code (Additional CSS, footer, calculator) under version control. Parent: Astra. Author: DBJ Technologies Author URI: https://dbjtechnologies.com Template: astra Version: 1.0.0 Text Domain: soil-depot-child */ /* ============================================================================ ADDITIONAL CSS Migrated verbatim from Customizer -> Additional CSS (custom_css post 542). On cutover, clear the Customizer Additional CSS box so this is not duplicated. ============================================================================ */ /* ============================================= CSS FIX - TWO CHANGES NEEDED ============================================= */ /* ─── CHANGE 1 ─────────────────────────────── Add this SINGLE LINE as the very first line of Additional CSS, BEFORE the "SOIL DEPOT" comment block. It must be the first rule in the stylesheet. ──────────────────────────────────────────── */ /* @import removed during migration: Instrument Serif (with DM Sans) is now enqueued in via functions.php, eliminating this render-blocking @import for a faster font load. - DBJ */ /* ─── CHANGE 2 ─────────────────────────────── Add this block inside Section 6, right AFTER the "ANIMATION: ENTRANCE SEQUENCE" section and BEFORE the "REDUCED MOTION" section. This is a pure-CSS safety net: if JS fails and .is-loaded is never added, content becomes visible after 4 seconds anyway. ──────────────────────────────────────────── */ /* Fallback: show content after 4s if JS never fires */ .sdh-hero:not(.is-loaded) .sdh-locations, .sdh-hero:not(.is-loaded) .sdh-kicker, .sdh-hero:not(.is-loaded) .sdh-title-line, .sdh-hero:not(.is-loaded) .sdh-text, .sdh-hero:not(.is-loaded) .sdh-actions, .sdh-hero:not(.is-loaded) .sdh-trust, .sdh-hero:not(.is-loaded) .sdh-sidecard { animation: sdh-fallback-show 0.5s ease 4s both; } @keyframes sdh-fallback-show { to { opacity: 1; } } /* Also show the video fallback */ .sdh-hero:not(.is-loaded) .sdh-hero-video { animation: sdh-fallback-show 0.5s ease 4s both; } /* ─── NOTE ──────────────────────────────────── The reduced motion section already handles the :not(.is-loaded) case by setting opacity: 1 in the inline style block. This CSS fallback is for the NON-reduced-motion case where JS fails entirely. ──────────────────────────────────────────── */ /* ============================================================= SOIL DEPOT - CONSOLIDATED ADDITIONAL CSS Last updated: April 2026 TABLE OF CONTENTS: 1. Base Safety & Resets 2. Homepage Layout (Full-Width Blocks) 3. Shared Site Variables 4. Header / Logo (Desktop + Mobile + Transparent) 5. Mobile Drawer Menu 6. Hero Section 7. Trust Badge Grid (5 columns) 8. Legacy Button Overrides 9. Soil Calculator - Zone Animations ============================================================= */ /* ====================== 1. BASE SAFETY & RESETS ====================== */ html, body { max-width: 100%; overflow-x: hidden !important; } img, video, iframe { max-width: 100%; height: auto; } .site, .site-content, .ast-container, .ast-separate-container .site-main, .entry-content, .wp-block-html { max-width: 100%; } .wp-block-html { overflow-x: clip; } /* ============================ 2. HOMEPAGE LAYOUT (FULL-WIDTH) ============================ */ /* Hide default home title */ body.home .entry-header, body.home .entry-title, body.home .ast-entry-header, body.home h1.entry-title, body.home header.entry-header { display: none !important; } body.home .site-content, body.home .ast-separate-container .site-main { padding-top: 0 !important; } /* Remove width limits on home */ body.home .site, body.home .site-content, body.home .site-main, body.home .ast-container, body.home .ast-separate-container .site-main, body.home .entry-content, body.home article, body.home .entry-content > .wp-block-html { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Make each home Custom HTML block full bleed */ body.home .entry-content > .wp-block-html { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; } /* Outer home sections - full width */ body.home .sdh-hero, body.home .sd-master-wrapper, body.home .sd-split, body.home .sd-how, body.home .sdp-proof, body.home .sdx-cta { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Inner home section width alignment */ body.home .sdh-shell, body.home .sd-master-wrapper .sd-sol-wrap, body.home .sd-split-wrap, body.home .sd-how-wrap, body.home .sdp-wrap, body.home .sdx-wrap { width: min(var(--sd-site-max), calc(100% - (var(--sd-site-gutter) * 2))) !important; max-width: var(--sd-site-max) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Hero background stays full bleed */ body.home .sdh-hero { /* fit copy + sidecard + Google reviews bar in the first screen (viewport minus 119px header) */ min-height: calc(100svh - 120px) !important; overflow: hidden !important; } body.home .sdh-hero-media, body.home .sdh-hero-overlay, body.home .sdh-hero::after { left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; } @media (max-width: 640px) { body.home .sdh-hero { min-height: auto !important; } /* Mobile: portrait scrim so the H1 / subhead / trust copy stay legible over the video. */ body.home .sdh-hero-overlay { background: linear-gradient(180deg, rgba(8,10,11,.66) 0%, rgba(8,10,11,.52) 26%, rgba(8,10,11,.46) 44%, rgba(8,10,11,.36) 60%, rgba(8,10,11,.40) 80%, rgba(8,10,11,.62) 100%) !important; } body.home .sdh-inner { grid-template-columns: 1fr !important; gap: 18px !important; min-height: auto !important; } body.home .sdh-sidecard { max-width: none !important; } } /* ======================== 3. SHARED SITE VARIABLES ======================== */ :root { --sd-cream: #F5F2E6; --sd-brown: #5B3A1E; --sd-brown-2: #8A6A44; --sd-green: #1F7A3A; --sd-white: #FFFFFF; --sd-ink: #121212; --sd-site-max: 1380px; --sd-site-gutter: 24px; } @media (max-width: 1080px) { :root { --sd-site-gutter: 20px; } } @media (max-width: 640px) { :root { --sd-site-gutter: 16px; } } /* ============================================= 4. HEADER / LOGO (Desktop + Mobile + Transparent) ============================================= */ /* Global header shell */ #masthead, .site-header { position: relative !important; width: 100% !important; z-index: 1000 !important; } .ast-primary-header-bar, .main-header-bar { background: #ffffff !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important; } /* Reset spacing on all header internals */ #masthead .site-header-section, #masthead .site-header-primary-section-left, #masthead .site-header-primary-section-right, .site-header .site-header-section, .site-header .site-header-primary-section-left, .site-header .site-header-primary-section-right, #masthead .ast-builder-grid-row-container, .site-header .ast-builder-grid-row-container, #masthead .ast-builder-layout-element, .site-header .ast-builder-layout-element { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* --- DESKTOP HEADER (922px+) --- */ @media (min-width: 922px) { #masthead .ast-primary-header-bar, #masthead .main-header-bar, .site-header .ast-primary-header-bar, .site-header .main-header-bar { padding-top: 0 !important; padding-bottom: 0 !important; } /* Grid row - auto height, no clipping */ #masthead .ast-builder-grid-row, .site-header .ast-builder-grid-row, .ast-theme-transparent-header .ast-builder-grid-row { height: auto !important; min-height: 76px !important; /* was 90px; trims the header ~30% w/o shrinking the 64px logo */ max-height: none !important; overflow: visible !important; display: grid !important; grid-template-columns: minmax(290px, 320px) auto 1fr !important; align-items: center !important; column-gap: 18px !important; } /* Astra's dynamic header-height sets .ast-builder-grid-row-container{min-height:80px}, which is the real binding floor for the bar. Match the trimmed row so the header actually shrinks (and the scrolled state can condense). */ #masthead .ast-builder-grid-row-container, .site-header .ast-builder-grid-row-container { min-height: 76px !important; /* was 80px (Astra) */ } /* Logo container */ #masthead .site-branding, #masthead .ast-site-identity, #masthead .custom-logo-link, .site-header .site-branding, .site-header .ast-site-identity, .site-header .custom-logo-link, .ast-theme-transparent-header .site-branding, .ast-theme-transparent-header .ast-site-identity, .ast-theme-transparent-header .custom-logo-link { height: auto !important; max-height: none !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-width: 0 !important; max-width: 320px !important; margin: 0 !important; padding: 0 !important; /* was 6px 0; let the 64px logo set the row height exactly */ line-height: 0 !important; } /* Logo image */ #masthead .custom-logo-link img, #masthead .site-branding img, #masthead .custom-logo, .site-header .custom-logo-link img, .site-header .site-branding img, .site-header .custom-logo, .ast-theme-transparent-header .custom-logo-link img, .ast-theme-transparent-header .custom-logo { width: 280px !important; max-width: 280px !important; height: auto !important; max-height: none !important; object-fit: contain !important; display: block !important; margin: 0 !important; transform: none !important; } /* Contact Us button */ .ast-builder-button-wrap { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .ast-builder-button-wrap .ast-custom-button, .ast-custom-button, a.ast-custom-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 0 18px !important; line-height: 1 !important; border-radius: 999px !important; white-space: nowrap !important; border: none !important; background: #1F7A3A !important; color: #ffffff !important; box-shadow: none !important; } /* Navigation */ .ast-builder-menu-1 { min-width: 0 !important; justify-self: end !important; } .main-header-menu { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0 !important; } .main-header-menu > .menu-item { flex: 0 0 auto !important; } .main-header-menu > .menu-item > .menu-link, .main-header-menu > .menu-item > a { color: #161616 !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 12px !important; white-space: nowrap !important; line-height: 1.2 !important; } } /* --- MOBILE HEADER (921px and below) --- */ @media (max-width: 921px) { #masthead .ast-primary-header-bar, #masthead .main-header-bar, .site-header .ast-primary-header-bar, .site-header .main-header-bar { padding-top: 0 !important; padding-bottom: 0 !important; } /* Grid row - auto height, no clipping */ #masthead .ast-builder-grid-row, .site-header .ast-builder-grid-row, .ast-theme-transparent-header .ast-builder-grid-row { height: auto !important; min-height: 70px !important; max-height: none !important; overflow: visible !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 12px !important; } /* Logo container */ #masthead .site-branding, #masthead .ast-site-identity, #masthead .custom-logo-link, .site-header .site-branding, .site-header .ast-site-identity, .site-header .custom-logo-link, .ast-theme-transparent-header .site-branding, .ast-theme-transparent-header .ast-site-identity, .ast-theme-transparent-header .custom-logo-link { height: auto !important; max-height: none !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-width: 0 !important; max-width: 72% !important; margin: 0 !important; padding: 4px 0 !important; line-height: 0 !important; } /* Logo image - mobile size override */ #masthead .custom-logo-link img, #masthead .site-branding img, #masthead .custom-logo, .site-header .custom-logo-link img, .site-header .site-branding img, .site-header .custom-logo, .ast-theme-transparent-header .custom-logo-link img, .ast-theme-transparent-header .custom-logo { width: 210px !important; max-width: 210px !important; height: auto !important; max-height: none !important; object-fit: contain !important; display: block !important; margin: 0 !important; transform: none !important; } /* Mobile button */ .ast-builder-button-wrap .ast-custom-button, .ast-custom-button, a.ast-custom-button { min-height: 38px !important; padding: 0 14px !important; font-size: 14px !important; line-height: 1 !important; border-radius: 999px !important; background: #1F7A3A !important; color: #ffffff !important; } .ast-builder-button-wrap, .ast-mobile-menu-buttons, .ast-button-wrap, .menu-toggle.main-header-menu-toggle, .ast-mobile-menu-trigger-minimal { margin-left: auto !important; } } /* ====================== 5. MOBILE DRAWER MENU ====================== */ @media (max-width: 921px) { .ast-mobile-popup-drawer, .ast-mobile-popup-drawer.active, .ast-mobile-popup-content, .ast-mobile-popup-inner, .ast-builder-menu-mobile, .ast-builder-menu-mobile .main-navigation, .ast-builder-menu-mobile .main-header-menu { width: 100% !important; max-width: 100% !important; } .ast-mobile-popup-drawer { left: 0 !important; right: 0 !important; } .ast-mobile-popup-drawer .ast-mobile-popup-inner, .ast-mobile-popup-content { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; left: 0 !important; right: 0 !important; margin: 0 !important; transform: none !important; background: #ffffff !important; } .ast-mobile-popup-content .main-header-menu, .ast-mobile-popup-drawer .main-header-menu, .ast-builder-menu-mobile .main-header-menu { display: block !important; width: 100% !important; padding: 20px 20px 28px !important; margin: 0 !important; background: #ffffff !important; } .ast-mobile-popup-content .main-header-menu > .menu-item, .ast-mobile-popup-drawer .main-header-menu > .menu-item, .ast-builder-menu-mobile .main-header-menu > .menu-item { display: block !important; width: 100% !important; margin: 0 !important; } .ast-mobile-popup-content .main-header-menu > .menu-item > .menu-link, .ast-mobile-popup-content .main-header-menu > .menu-item > a, .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link, .ast-mobile-popup-drawer .main-header-menu > .menu-item > a, .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link, .ast-builder-menu-mobile .main-header-menu > .menu-item > a { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 56px !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; font-size: 24px !important; line-height: 1.2 !important; white-space: normal !important; color: #161616 !important; background: transparent !important; } .ast-mobile-popup-content .sub-menu, .ast-mobile-popup-drawer .sub-menu, .ast-builder-menu-mobile .sub-menu { width: 100% !important; margin: 0 !important; padding: 0 0 8px 0 !important; background: #ffffff !important; } .ast-mobile-popup-content .sub-menu .menu-link, .ast-mobile-popup-drawer .sub-menu .menu-link, .ast-builder-menu-mobile .sub-menu .menu-link, .ast-mobile-popup-content .sub-menu a, .ast-mobile-popup-drawer .sub-menu a, .ast-builder-menu-mobile .sub-menu a { font-size: 18px !important; min-height: 46px !important; padding: 12px 0 12px 18px !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; } } /* ================ 6. HERO SECTION ================ */ .sdh-hero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: calc(100svh - 120px); overflow: hidden; background: #171513; isolation: isolate; } .sdh-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #171513; } .sdh-hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; transform: scale(1.04); filter: saturate(.98) contrast(1.02) brightness(1.02); } .sdh-hero-overlay { position: absolute; inset: 0; z-index: 1; background: /* spotlight that anchors the copy column on the left, fades clear over the excavator */ radial-gradient(125% 130% at 6% 50%, rgba(8,10,11,.74) 0%, rgba(8,10,11,.52) 22%, rgba(8,10,11,.22) 44%, rgba(8,10,11,.04) 62%, transparent 74%), /* directional cinematic wash, left heavy */ linear-gradient(100deg, rgba(8,10,11,.48) 0%, rgba(8,10,11,.26) 30%, rgba(8,10,11,.06) 58%, transparent 80%), /* bottom film gradient for the proof-point filmstrip */ linear-gradient(0deg, rgba(8,10,11,.64) 0%, rgba(8,10,11,.22) 16%, transparent 36%), /* top vignette for the location row */ linear-gradient(180deg, rgba(8,10,11,.40) 0%, transparent 22%), /* faint warm + green brand cast */ radial-gradient(circle at 80% 24%, rgba(31,122,58,.05), transparent 30%), radial-gradient(circle at 70% 80%, rgba(107,63,36,.05), transparent 32%); } .sdh-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%), radial-gradient(circle at 22% 22%, rgba(255,255,255,.04), transparent 22%); mix-blend-mode: screen; } .sdh-shell { position: relative; z-index: 2; width: min(var(--sd-site-max), calc(100% - (var(--sd-site-gutter) * 2))); max-width: var(--sd-site-max); margin: 0 auto; padding-top: 34px; padding-bottom: 24px; } /* rotated geo-coordinate rail pinned to the screen's left edge - bespoke industrial marker */ .sdh-hero::before { content: "33.02\00b0 N / 96.70\00b0 W"; position: absolute; left: clamp(14px, 1.8vw, 32px); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 10.5px; font-weight: 800; letter-spacing: 3.4px; text-transform: uppercase; color: rgba(255,255,255,.5); text-shadow: 0 1px 6px rgba(0,0,0,.55); white-space: nowrap; pointer-events: none; z-index: 2; } @media (max-width: 1180px) { .sdh-hero::before { display: none; } } /* ── Masthead title-block (locations row reframed as an engineering spec bar) ── */ .sdh-locations { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; align-items: center; padding: 12px 1px; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.13); } /* "PLANO, TEXAS" prefix removed 2026-06-07 (redundant with the Plano, TX chip top-right) */ .sdh-location { display: inline-flex; align-items: center; min-height: auto; padding: 0; border-radius: 0; background: none; border: none; color: rgba(255,255,255,.74); font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; backdrop-filter: none; box-shadow: none; text-shadow: 0 1px 4px rgba(0,0,0,.16); } .sdh-location::before { display: none; } .sdh-location:not(:last-child)::after { content: "\00b7"; display: inline-block; margin: 0 10px; font-size: 15px; font-weight: 400; color: rgba(255,255,255,.42); letter-spacing: 0; } /* ── Grid - CENTERED vertically ── */ .sdh-inner { display: grid; grid-template-columns: 1fr; gap: 0; align-items: center; min-height: calc(92svh - 195px); padding: 2vh 0 0 0; } /* ── Copy area - no card; sits directly on the footage, editorial spine on the left ── */ .sdh-copy { position: relative; max-width: 720px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; color: #fff; } .sdh-copy::before { display: none; } .sdh-copy > * { position: relative; z-index: 2; } /* Micro-shake on impact */ .sdh-copy.is-shaking { animation: sdh-micro-shake .22s ease; } /* Post-impact warm glow */ .sdh-hero.is-loaded .sdh-copy::after { content: ""; display: block; position: absolute; top: 8%; left: -8%; width: 80%; height: 68%; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 32% 45%, rgba(140, 90, 40, .07), transparent 58%), radial-gradient(ellipse at 55% 38%, rgba(245, 242, 230, .03), transparent 52%); opacity: 0; animation: sdh-glow-settle 2.8s ease 1s both; } /* ── Kicker ── */ .sdh-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 0; border-radius: 0; background: none; border: none; color: #ecd3a0; font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; backdrop-filter: none; text-shadow: 0 1px 8px rgba(0,0,0,.45); } /* refined leading accent rule */ .sdh-kicker::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2c9a4e, #ecd3a0); flex: none; } /* ── Title ── */ .sdh-title { margin: 24px 0 22px 0; font-size: clamp(68px, 8.8vw, 132px); line-height: .84; letter-spacing: -.06em; text-shadow: 0 2px 5px rgba(0,0,0,.55), 0 6px 28px rgba(0,0,0,.42), 0 1px 16px rgba(0,0,0,.30); max-width: 10ch; text-wrap: balance; } .sdh-title-line { display: block; } /* Serif contrast - second headline line */ .sdh-hero .sdh-title .sdh-title-line:last-child { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400 !important; text-transform: none; letter-spacing: -.025em; font-size: 1.16em; padding-left: .12em; color: #f4ead2; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 6px 30px rgba(0,0,0,.42), 0 1px 18px rgba(0,0,0,.30); } /* ── Subhead ── */ /* NOTE: a global `.entry-content p { color:#615c54 }` (spec 0,1,1) was overriding the hero subhead to muted gray. This scoped rule (0,2,0) restores true white and is the real fix for the recurring "illegible subhead" issue - it was color, not contrast. */ .sdh-hero .sdh-text { color: #ffffff; } .sdh-text { position: relative; margin: 0 0 28px 0; max-width: 40ch; font-size: 20px; line-height: 1.58; font-weight: 500; color: #ffffff; /* caption-grade outline + glow: legible on ANY frame of the footage, never washes out */ text-shadow: -1px -1px 1px rgba(0,0,0,.65), 1px -1px 1px rgba(0,0,0,.65), -1px 1px 1px rgba(0,0,0,.65), 1px 1px 1px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.9), 0 2px 7px rgba(0,0,0,.92), 0 0 18px rgba(0,0,0,.7); } /* feathered dark pool hugging the subhead - guarantees contrast over the brightest dirt without a hard box */ .sdh-text::before { content: ""; position: absolute; inset: -10px -18px -10px -14px; z-index: -1; background: radial-gradient(120% 130% at 28% 50%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.12) 76%, transparent 90%); filter: blur(7px); border-radius: 14px; pointer-events: none; } .sdh-copy-note { display: none; } /* ── CTAs ── */ .sdh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; } .sdh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 5px; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .sdh-btn:hover { transform: translateY(-1px); } .sdh-btn-primary { background: linear-gradient(180deg, #259446, #17672f); color: #fff; box-shadow: 0 14px 32px rgba(31,122,58,.26); } .sdh-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 18px 38px rgba(31,122,58,.30); } .sdh-btn-secondary { background: rgba(10,12,12,.34); color: #fff; border: 1px solid rgba(255,255,255,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0,0,0,.24); } .sdh-btn-secondary:hover { background: rgba(10,12,12,.54); border-color: rgba(236,211,160,.55); color: #fff; } /* ── Trust bar ── */ .sdh-trust { display: grid; gap: 0; align-items: stretch; margin-top: 22px; padding-top: 18px; border-radius: 0; overflow: visible; background: none; border: none; border-top: 1px solid rgba(255,255,255,.16); position: relative; backdrop-filter: none; counter-reset: sdh-pf; } /* premium gradient accent tick on the hairline */ .sdh-trust::before { content: ""; position: absolute; top: -1px; left: 0; width: 96px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2c9a4e 0%, #ecd3a0 100%); } .sdh-badge { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; min-height: 54px; padding: 6px 18px; color: rgba(255,255,255,.86); font-size: 12px; font-weight: 700; letter-spacing: .4px; line-height: 1.3; text-align: left; white-space: normal; position: relative; text-shadow: 0 1px 6px rgba(0,0,0,.5); transition: color .2s ease; } .sdh-badge:first-child { padding-left: 0; } .sdh-badge:hover { color: #fff; } /* numbered spec index - reads like an engineering legend */ .sdh-badge::before { counter-increment: sdh-pf; content: counter(sdh-pf, decimal-leading-zero); display: block; flex: none; color: #ecd3a0; font-size: 12px; font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.55); } .sdh-badge:not(:last-child) { border-right: 1px solid rgba(255,255,255,.12); } /* ── Sidecard ── */ .sdh-sidecard { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: none; margin-top: 10px; padding: 12px 0 0; border-radius: 0; background: none; border: none; border-top: 1px solid rgba(255,255,255,.05); backdrop-filter: none; box-shadow: none; color: #fff; } .sdh-sidecard-prompt { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.68); text-shadow: 0 1px 5px rgba(0,0,0,.35); } .sdh-sidecard-link { display: inline-flex; align-items: center; gap: 6px; min-height: auto; padding: 0; border-radius: 0; text-decoration: none; font-size: 13px; font-weight: 700; background: none; color: #ecd3a0; border: none; box-shadow: none; transition: color .18s ease; text-shadow: 0 1px 5px rgba(0,0,0,.4); } .sdh-sidecard-link:hover { color: rgba(255,255,255,.78); } .sdh-sidecard-link::after { content: "\2192"; font-size: 14px; transition: transform .18s ease; } .sdh-sidecard-link:hover::after { transform: translateX(3px); } .sdh-sidecard-kicker, .sdh-sidecard-title, .sdh-sidecard-text { display: none; } /* ============================================= KEYFRAMES ============================================= */ @keyframes sdh-drop-in { 0% { opacity: 0; transform: translateY(-22px) scaleY(1.04); } 55% { opacity: 1; transform: translateY(3px) scaleY(.99); } 78% { transform: translateY(-1px) scaleY(1); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } @keyframes sdh-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes sdh-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Snappier initial explosion, dramatic trajectory */ @keyframes sdh-particle-burst { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.5); } 5% { opacity: var(--p-o, .7); transform: translate(calc(var(--p-dx) * .12), calc(var(--p-up) * .7)) rotate(calc(var(--p-r) * .08)) scale(1.1); } 16% { opacity: calc(var(--p-o, .7) * .88); transform: translate(calc(var(--p-dx) * .42), calc(var(--p-up) * .2)) rotate(calc(var(--p-r) * .28)) scale(.85); } 100% { opacity: 0; transform: translate(var(--p-dx), var(--p-dn)) rotate(var(--p-r)) scale(.1); } } @keyframes sdh-glow-settle { 0% { opacity: 0; transform: scale(.85); } 30% { opacity: 1; } 60% { opacity: .65; } 100% { opacity: 0; transform: scale(1.15); } } @keyframes sdh-mote-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(var(--m-x1, 8px), var(--m-y1, -6px)); } 66% { transform: translate(var(--m-x2, -5px), var(--m-y2, 10px)); } } /* Dust haze cloud - atmospheric burst behind text */ @keyframes sdh-haze-pulse { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; } 50% { opacity: .6; } 100% { opacity: 0; transform: scale(1.4); } } /* Micro-shake on headline impact */ @keyframes sdh-micro-shake { 0%, 100% { transform: translateX(0); } 14% { transform: translateX(-2px); } 28% { transform: translateX(2px); } 42% { transform: translateX(-1.5px); } 56% { transform: translateX(1.5px); } 70% { transform: translateX(-0.5px); } 84% { transform: translateX(0.5px); } } /* JS failure fallback */ @keyframes sdh-fallback-show { to { opacity: 1; } } /* ============================================= PARTICLES, HAZE & MOTES ============================================= */ .sdh-particle { position: absolute; pointer-events: none; z-index: 10; animation-name: sdh-particle-burst; animation-timing-function: cubic-bezier(.12, .72, .3, 1); animation-fill-mode: forwards; } .sdh-dust-haze { position: absolute; pointer-events: none; z-index: 1; border-radius: 50%; filter: blur(30px); animation: sdh-haze-pulse 1.8s ease both; } .sdh-mote { position: absolute; pointer-events: none; z-index: 3; border-radius: 50%; animation: sdh-mote-drift var(--m-dur, 25s) ease-in-out infinite; opacity: var(--m-o, .12); } /* ============================================= ENTRANCE SEQUENCE ============================================= */ .sdh-hero.is-loaded .sdh-locations { animation: sdh-fade-in .5s ease .1s both; } .sdh-hero.is-loaded .sdh-kicker { animation: sdh-fade-up .45s ease .25s both; } .sdh-hero.is-loaded .sdh-title-line:first-child { animation: sdh-drop-in .5s cubic-bezier(.22, .88, .36, 1) .45s both; } .sdh-hero.is-loaded .sdh-title-line:last-child { animation: sdh-drop-in .5s cubic-bezier(.22, .88, .36, 1) .72s both; } .sdh-hero.is-loaded .sdh-text { animation: sdh-fade-up .5s ease .95s both; } .sdh-hero.is-loaded .sdh-actions { animation: sdh-fade-up .5s ease 1.08s both; } .sdh-hero.is-loaded .sdh-trust { animation: sdh-fade-in .6s ease 1.25s both; } .sdh-hero.is-loaded .sdh-sidecard { animation: sdh-fade-in .5s ease 1.4s both; } /* JS failure fallback: show after 4s */ .sdh-hero:not(.is-loaded) .sdh-locations, .sdh-hero:not(.is-loaded) .sdh-kicker, .sdh-hero:not(.is-loaded) .sdh-title-line, .sdh-hero:not(.is-loaded) .sdh-text, .sdh-hero:not(.is-loaded) .sdh-actions, .sdh-hero:not(.is-loaded) .sdh-trust, .sdh-hero:not(.is-loaded) .sdh-sidecard { animation: sdh-fallback-show 0.5s ease 4s both; } .sdh-hero:not(.is-loaded) .sdh-hero-video { animation: sdh-fallback-show 0.5s ease 4s both; } /* ============================================= REDUCED MOTION ============================================= */ @media (prefers-reduced-motion: reduce) { .sdh-hero-media { background-image: url("https://soil-depot.com/wp-content/uploads/2026/01/imgi_2_ConstructionDIRT6.webp"); background-size: cover; background-position: center center; } .sdh-hero-video { display: none; } .sdh-hero.is-loaded .sdh-locations, .sdh-hero.is-loaded .sdh-kicker, .sdh-hero.is-loaded .sdh-title-line, .sdh-hero.is-loaded .sdh-text, .sdh-hero.is-loaded .sdh-actions, .sdh-hero.is-loaded .sdh-trust, .sdh-hero.is-loaded .sdh-sidecard { animation: none !important; opacity: 1 !important; transform: none !important; } .sdh-hero.is-loaded .sdh-copy::after { animation: none !important; opacity: 0 !important; } .sdh-copy.is-shaking { animation: none !important; } .sdh-particle, .sdh-dust-haze, .sdh-mote { display: none !important; } } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1080px) { .sdh-shell { padding-top: 28px; padding-bottom: 20px; } .sdh-title { font-size: clamp(50px, 8vw, 82px); } .sdh-text { font-size: 18px; max-width: 38ch; } } @media (max-width: 980px) { .sdh-inner { grid-template-columns: 1fr; gap: 0; min-height: auto; } .sdh-copy { max-width: none; } .sdh-sidecard { max-width: none; } } @media (max-width: 640px) { .sdh-hero { min-height: auto; } .sdh-shell { padding-top: 18px; padding-bottom: 16px; } .sdh-locations { gap: 2px 0; } .sdh-location { font-size: 10px; letter-spacing: 1.6px; } .sdh-location:not(:last-child)::after { margin: 0 7px; font-size: 13px; } .sdh-kicker { font-size: 10.5px; } .sdh-title { font-size: clamp(38px, 13vw, 56px); line-height: .92; margin: 18px 0 14px 0; max-width: 9ch; } .sdh-text { font-size: 16px; line-height: 1.62; margin-bottom: 20px; max-width: none; } .sdh-actions { flex-direction: column; align-items: stretch; } .sdh-btn { width: 100%; min-height: 52px; } .sdh-sidecard { max-width: none; padding: 10px 0 0; } .sdh-trust { grid-template-columns: 1fr; } .sdh-badge { min-height: 44px; justify-content: flex-start; text-align: left; } .sdh-badge:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); } @keyframes sdh-drop-in { 0% { opacity: 0; transform: translateY(-12px) scaleY(1.02); } 55% { opacity: 1; transform: translateY(2px) scaleY(.995); } 78% { transform: translateY(-0.5px) scaleY(1); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } } /* ================================ 7. TRUST BADGE GRID (5 COLUMNS) ================================ */ .sdh-trust { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } @media (max-width: 1080px) { .sdh-trust { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .sdh-trust { grid-template-columns: 1fr !important; } } .ast-builder-grid-row-container { padding-left: 0 !important; padding-right: 0 !important; } /* =================================== SOIL DEPOT - LIVE FIXES (Apr 15 2026) #2 Mobile CTA | #3 Sticky Nav | #4 Underline #5 Backgrounds | #7 Cross-link styles | scrollbar =================================== */ /* #2 - Mobile CTA button stacking on city pages */ @media (max-width: 768px) { .sdp-city-cta-row { flex-direction: column !important; align-items: stretch !important; } .sdp-city-cta-row .sdp-city-btn-g, .sdp-city-cta-row .sdp-city-btn-o { width: 100% !important; justify-content: center !important; text-align: center !important; } } /* #3 Sticky header: the sticky behaviour + frosted condense now live in ONE place, assets/css/nav.css. The old always-on backdrop-filter and a second position:sticky/z-index declaration used to live here and fought nav.css, which (with no scroll hysteresis) produced the scroll-up flicker. Removed. Kept below: the scroll-context guard (body overflow-x:clip stops an ancestor scroll container from breaking sticky) and the admin-bar top offset. */ body { overflow-x: clip !important; } .admin-bar #masthead { top: 32px; } @media (max-width: 782px) { .admin-bar #masthead { top: 46px; } } /* #4 - Defensive underline fix for hub metro cards */ .sdp-sa-card a, .sdp-sa-card-desc a, .sdp-sa-card-cta, .entry-content .sdp-sa-card a { text-decoration: none !important; } /* #5 - Background color: cream base sitewide */ body, .ast-separate-container, .ast-plain-container { background-color: #F5F1E6 !important; } .ast-separate-container .ast-article-single, .ast-separate-container .ast-article-post { background-color: transparent; } .sdp-city-bg-c, .sdp-city-hero, .sdp-city-mgr-sec, .sdp-sa-hero { background-color: #F5F1E6 !important; } /* #7 - Cross-links in What We Do spec tables */ .sdp-spec-val a, .entry-content .sdp-spec-val a { text-decoration: none !important; color: inherit !important; } .sdp-spec-val a:hover, .entry-content .sdp-spec-val a:hover { text-decoration: underline !important; } /* Scrollbar layout shift fix */ html { scrollbar-gutter: stable; } /* Homepage "Ready to line it up" CTA - mobile button stacking */ @media (max-width: 768px) { .sd-cta-actions { flex-direction: column !important; align-items: stretch !important; } .sd-cta-actions .sd-btn { width: 100% !important; justify-content: center !important; text-align: center !important; } } /* Homepage "How it works" CTA - mobile button stacking */ @media (max-width: 768px) { .sdx-actions { flex-direction: column !important; align-items: stretch !important; } .sdx-actions .sdx-btn { width: 100% !important; justify-content: center !important; text-align: center !important; } } /* ── Soil Calculator Hero Keyframes ── */ /* These MUST live in Additional CSS, not inline. LiteSpeed breaks inline @keyframes. */ @keyframes alg{to{height:100%}} @keyframes gi{to{opacity:1}} @keyframes pu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}} @keyframes fu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes si{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes rfill{to{height:100%}} @keyframes shm{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes din{to{opacity:1}} @keyframes scin{to{transform:scale(1)}} @keyframes rng{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.06);opacity:.05}} @keyframes flt{0%,100%{transform:translate(0,0);opacity:.15}25%{transform:translate(6px,-10px);opacity:.35}50%{transform:translate(-4px,-16px);opacity:.06}75%{transform:translate(10px,-5px);opacity:.25}} @keyframes cxi{to{opacity:1}} /* ============================================================================ * WCAG-AA contrast pass (site-wide). Each rule lifts a pre-existing element * over the 4.5:1 threshold; values chosen to stay on-brand. * ========================================================================== */ /* Body/content text was ~#797878 on the cream base (~3.9:1) -> warm dark (~5:1). */ .entry-content, .entry-content p, .entry-content li, .entry-content td, .entry-content th { color:#4a3f2c; } /* was #615c54 (cool, ~5.9:1) -> warm walnut ~9:1, far more legible on cream */ /* Global block buttons were #238a55 (white text ~4.0:1) -> darker green (~5.8:1). */ .wp-block-button > .wp-block-button__link { background-color:#1b6e3f; } .wp-block-button.is-style-outline > .wp-block-button__link { color:#1b6e3f; border-color:#1b6e3f; } /* Header logo: keep a comfortable click/tap target. */ .site-logo-img .custom-logo-link { display:inline-block; min-height:24px; } /* Bespoke marketing-page small labels used --ink-40 (rgba(18,18,18,.40) ~2.6:1) * on white; darken to >=4.5:1. body-prefixed to beat the page's inline rules. */ body .sdp-qf-lab, body .sdp-team-role, body .sdp-hw p { color:#5c4d36; } /* was #595959 (cool gray) -> warm walnut, matches the body ink */ @keyframes scn{0%{top:42%;opacity:0}8%{opacity:.4}50%{top:82%;opacity:.3}92%{opacity:0}100%{top:42%;opacity:0}} /* ============================================= SCRIPTURE MOUNTAIN BAND (home) - epic cinematic verse over Mt McKinley ============================================= */ .sd-scripture { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: clamp(175px, 23vh, 262px); display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; margin-top: 6px; margin-bottom: 40px; background: #15171d; border-top: 1px solid rgba(236,211,160,.35); border-bottom: 1px solid rgba(236,211,160,.22); } .sd-scripture-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.03); z-index: 0; } .sd-scripture-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 54%, rgba(10,10,14,.05) 0%, rgba(10,10,14,.30) 52%, rgba(10,10,14,.6) 100%), linear-gradient(180deg, rgba(10,10,14,.42) 0%, rgba(10,10,14,0) 26%, rgba(10,10,14,0) 60%, rgba(10,10,14,.48) 100%); } .sd-scripture .sd-sol-quote-wrap { position: relative; z-index: 3; margin: 0; padding: 0 24px; text-align: center; } /* kill the default blockquote left border so the verse floats clean over the mountain */ .sd-scripture .sd-sol-quote { border: 0 !important; margin: 0 auto !important; padding: 0 !important; background: none !important; } .sd-scripture .sd-sol-quote-accent { margin-bottom: 20px; } .sd-scripture .sd-sol-quote-accent::before, .sd-scripture .sd-sol-quote-accent::after { background: linear-gradient(90deg, rgba(236,211,160,0) 0%, rgba(236,211,160,.9) 100%) !important; width: 72px !important; } .sd-scripture .sd-sol-quote-seed { box-shadow: 0 0 0 6px rgba(31,122,58,.18), 0 0 18px rgba(233,217,166,.6) !important; } /* verse: light + large + epic. (0,3,0) beats the post's .sd-master-wrapper .sd-sol-quote-text (0,2,0) */ .sd-scripture .sd-sol-quote .sd-sol-quote-text { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; color: #fbf6ec; font-size: clamp(24px, 2.9vw, 42px); line-height: 1.32; letter-spacing: .3px; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6), 0 0 28px rgba(0,0,0,.4); } .sd-scripture .sd-sol-quote .sd-sol-quote-emphasis { font-style: italic; display: inline-block; padding: .28em .06em .16em; line-height: 1; background: linear-gradient(100deg,#f7e6b2 0%,#eccb6c 28%,#dba63a 50%,#f4dc90 74%,#eccb6c 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: sdVerseShimmer 6.5s ease-in-out infinite; } @media (max-width: 640px) { .sd-scripture { min-height: clamp(160px, 30vh, 228px); margin-bottom: 30px; } .sd-scripture-vid { object-position: center 42%; } } /* ============================================= HOME SECTION LIFE - animated topographic depth + warm earthwork glow ============================================= */ /* warm the flat near-white "How it works" bg so the white cards gain depth */ body.home .sd-how { background: linear-gradient(180deg, #FBF8F0 0%, #F3EEE1 100%) !important; } .sd-how, .sdp-proof { position: relative; } .sd-how-wrap, .sdp-shell, .sdp-wrap { position: relative; z-index: 2; } /* ============================================================= SPLIT EDITORIAL HERO (home) - structural redesign warm textured brand panel | full-height cinematic video stage ============================================================= */ .sdh-hero--split { display: flex; flex-direction: column; /* fit the whole hero (copy + sidecard + Google reviews bar) within the first screen on landing: viewport minus the 119px sticky header */ min-height: calc(100svh - 120px); background: #1b130c; overflow: hidden; } .sdh-hero--split .sdh-split { flex: 1 1 auto; display: grid; grid-template-columns: 1fr; /* full-bleed video hero (SVG left panel retired 2026-06-07) */ min-height: 0; } /* ---- LEFT: brand panel ---- */ .sdh-hero--split .sdh-panel { position: relative; display: flex; overflow: visible; background: radial-gradient(115% 80% at 0% 0%, rgba(47,164,81,.12), transparent 46%), radial-gradient(120% 120% at 100% 100%, rgba(180,120,60,.16), transparent 52%), linear-gradient(152deg, #3c2616 0%, #2a1a10 56%, #190f08 100%); } .sdh-hero--split .sdh-panel-tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27720%27%20height%3D%27900%27%20viewBox%3D%270%200%20720%20900%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23E6D4B6%27%20stroke-width%3D%271.1%27%20stroke-opacity%3D%270.07%27%3E%3Cpath%20d%3D%27M-60%2010%20C%20130%20-6%2C%20280%2026%2C%20420%2010%20S%20700%20-6%2C%20860%2010%27%2F%3E%3Cpath%20d%3D%27M-60%2072%20C%20130%2048%2C%20280%2096%2C%20420%2072%20S%20700%2048%2C%20860%2072%27%2F%3E%3Cpath%20d%3D%27M-60%20134%20C%20130%20102%2C%20280%20166%2C%20420%20134%20S%20700%20102%2C%20860%20134%27%2F%3E%3Cpath%20d%3D%27M-60%20196%20C%20130%20180%2C%20280%20212%2C%20420%20196%20S%20700%20180%2C%20860%20196%27%2F%3E%3Cpath%20d%3D%27M-60%20258%20C%20130%20234%2C%20280%20282%2C%20420%20258%20S%20700%20234%2C%20860%20258%27%2F%3E%3Cpath%20d%3D%27M-60%20320%20C%20130%20288%2C%20280%20352%2C%20420%20320%20S%20700%20288%2C%20860%20320%27%2F%3E%3Cpath%20d%3D%27M-60%20382%20C%20130%20366%2C%20280%20398%2C%20420%20382%20S%20700%20366%2C%20860%20382%27%2F%3E%3Cpath%20d%3D%27M-60%20444%20C%20130%20420%2C%20280%20468%2C%20420%20444%20S%20700%20420%2C%20860%20444%27%2F%3E%3Cpath%20d%3D%27M-60%20506%20C%20130%20474%2C%20280%20538%2C%20420%20506%20S%20700%20474%2C%20860%20506%27%2F%3E%3Cpath%20d%3D%27M-60%20568%20C%20130%20552%2C%20280%20584%2C%20420%20568%20S%20700%20552%2C%20860%20568%27%2F%3E%3Cpath%20d%3D%27M-60%20630%20C%20130%20606%2C%20280%20654%2C%20420%20630%20S%20700%20606%2C%20860%20630%27%2F%3E%3Cpath%20d%3D%27M-60%20692%20C%20130%20660%2C%20280%20724%2C%20420%20692%20S%20700%20660%2C%20860%20692%27%2F%3E%3Cpath%20d%3D%27M-60%20754%20C%20130%20738%2C%20280%20770%2C%20420%20754%20S%20700%20738%2C%20860%20754%27%2F%3E%3Cpath%20d%3D%27M-60%20816%20C%20130%20792%2C%20280%20840%2C%20420%20816%20S%20700%20792%2C%20860%20816%27%2F%3E%3Cpath%20d%3D%27M-60%20878%20C%20130%20846%2C%20280%20910%2C%20420%20878%20S%20700%20846%2C%20860%20878%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: cover; background-repeat: no-repeat; background-position: center; } /* accent seam on the panel's right edge + soft shadow onto the video */ .sdh-hero--split .sdh-panel::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 3px; z-index: 4; background: linear-gradient(180deg, #2fa451 0%, #ecd3a0 55%, #2fa451 100%); box-shadow: 8px 0 30px rgba(0,0,0,.45); } /* shell fills the panel as a vertical flow */ body.home .sdh-hero--split .sdh-panel .sdh-shell { position: relative; z-index: 2; width: 100% !important; max-width: 640px !important; margin: 0 0 0 auto !important; height: 100%; display: flex; flex-direction: column; padding: clamp(26px,3.4vh,52px) clamp(34px,3.4vw,64px) clamp(26px,3.4vh,52px) clamp(40px,5vw,104px) !important; box-sizing: border-box; } /* masthead cities (links) */ body.home .sdh-hero--split .sdh-locations { margin: 0; padding: 0 0 11px; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } .sdh-hero--split .sdh-loc-label { color: #ecd3a0; font-size: 10.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; margin-right: 16px; } .sdh-hero--split .sdh-location { color: rgba(255,255,255,.74); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; transition: color .18s ease; } .sdh-hero--split .sdh-location:hover { color: #fff; } .sdh-hero--split .sdh-location:not(:last-child)::after { content: "\00b7"; margin: 0 9px; color: rgba(255,255,255,.36); font-weight: 400; } /* copy block centered in the remaining height */ .sdh-hero--split .sdh-inner { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; grid-template-columns: none; padding: 6px 0; } .sdh-hero--split .sdh-copy { max-width: none; padding: 0; } .sdh-hero--split .sdh-kicker { color: #ecd3a0; margin-bottom: 4px; } .sdh-hero--split .sdh-title { margin: 8px 0 12px; font-size: clamp(44px, 4.6vw, 84px); line-height: .9; letter-spacing: -.045em; text-shadow: 0 2px 14px rgba(0,0,0,.35); } .sdh-hero--split .sdh-hero-title-fallback {} .sdh-hero--split .sdh-title .sdh-title-line:last-child { font-size: 1.12em; color: #f4ead2; } .sdh-hero--split .sdh-text { color: rgba(245,242,230,.88); font-weight: 400; max-width: 44ch; margin-bottom: 18px; text-shadow: none; } .sdh-hero--split .sdh-text::before { display: none; } /* Spanish runs ~20% longer than English, so without help the hero title's bold line wraps to two lines (a 3-line title) and the paragraph to three lines, making the ES hero taller and differently proportioned than EN. Nudge the ES hero copy slightly so it keeps EN's structure (bold line + italic accent line; ~2-line paragraph) and the two language versions read the same. Scoped to only. */ @media (min-width: 901px) { html[lang="es"] .sdh-hero--split .sdh-title { font-size: clamp(40px, 4vw, 60px) !important; text-wrap: normal; } html[lang="es"] .sdh-hero--split .sdh-title .sdh-title-line { white-space: nowrap; } html[lang="es"] .sdh-hero--split .sdh-text { font-size: 16px; line-height: 1.5; max-width: 47ch; } } /* buttons */ .sdh-hero--split .sdh-btn-secondary { background: transparent; color: #f1e9d8; border: 1px solid rgba(236,211,160,.55); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .sdh-hero--split .sdh-btn-secondary:hover { background: rgba(236,211,160,.1); border-color: #ecd3a0; color: #fff; } /* sidecard pinned to panel bottom */ .sdh-hero--split .sdh-sidecard { margin: 0; padding: 11px 0 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 0; } /* ---- RIGHT: cinematic video stage ---- */ .sdh-hero--split .sdh-stage { position: relative; overflow: hidden; background: #0e0c0a; } .sdh-hero--split .sdh-hero-media { position: absolute; inset: 0; } .sdh-hero--split .sdh-hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; transform: scale(1.03); } .sdh-hero--split .sdh-stage-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20,14,9,.55) 0%, rgba(20,14,9,.12) 16%, transparent 34%), linear-gradient(0deg, rgba(10,8,6,.5) 0%, transparent 26%), radial-gradient(120% 80% at 80% 20%, rgba(0,0,0,0), rgba(0,0,0,.2) 100%); } .sdh-hero--split .sdh-stage-chip { position: absolute; top: 20px; right: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(12,12,14,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .sdh-hero--split .sdh-stage-dot { width: 7px; height: 7px; border-radius: 50%; background: #36c069; box-shadow: 0 0 0 0 rgba(54,192,105,.6); animation: sdhPulse 2.4s ease-out infinite; } @keyframes sdhPulse { 0% { box-shadow: 0 0 0 0 rgba(54,192,105,.55); } 70% { box-shadow: 0 0 0 7px rgba(54,192,105,0); } 100% { box-shadow: 0 0 0 0 rgba(54,192,105,0); } } /* ---- unifying proof ribbon ---- */ .sdh-hero--split .sdh-ribbon { flex: 0 0 auto; width: 100%; background: linear-gradient(180deg, #20140c 0%, #170e07 100%); border-top: 1px solid rgba(236,211,160,.2); } body.home .sdh-hero--split .sdh-ribbon .sdh-trust { width: min(var(--sd-site-max), calc(100% - 48px)) !important; margin: 0 auto !important; padding: 13px 0 !important; border: 0 !important; border-radius: 0 !important; } .sdh-hero--split .sdh-ribbon .sdh-trust::before { display: none; } /* kill the full-hero screen highlight + reduce the old copy glow on the panel */ .sdh-hero--split::after { display: none !important; } .sdh-hero--split.is-loaded .sdh-copy::after { opacity: 0 !important; } /* ---- responsive: stack (video on top) ---- */ @media (max-width: 900px) { .sdh-hero--split { min-height: auto; } .sdh-hero--split .sdh-split { grid-template-columns: 1fr; } .sdh-hero--split .sdh-stage { order: -1; min-height: 42svh; } .sdh-hero--split .sdh-panel::after { display: none; } body.home .sdh-hero--split .sdh-panel .sdh-shell { max-width: none !important; padding: 30px 22px 30px 22px !important; } .sdh-hero--split .sdh-ribbon .sdh-trust { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 560px) { .sdh-hero--split .sdh-ribbon .sdh-trust { grid-template-columns: 1fr !important; } .sdh-hero--split .sdh-title { font-size: clamp(40px, 12vw, 60px); } } /* ---- "PLANO, TX" chip vs the "Serving Texas" bar (Joshy 2026-06-08) ---- The serving-bar pill is content-width when the web font is loaded, but if it wraps (font fallback / narrow shell) it fills the shell and its right edge slides UNDER the absolutely-positioned top-right Plano chip (the chip lives in the shell's right-margin zone), occluding "Austin". Cap the bar so it can never reach the chip's column on tablet/desktop, and on phones drop the chip to the stage's bottom-right (clear of the top bar entirely). */ .sdh-hero--split .sdh-locations { max-width: calc(100% - 178px) !important; } /* On desktop (>=1101px) the Texas dispatch map (.sdh-txmap) shows in the top-right and already carries "Serving all of Texas / Plano hub" + a status foot. The small absolute "PLANO, TX" chip is redundant there AND collides with the map eyebrow in the ~1101-1300px band (Joshy image 5). Hide the chip where the map shows; it still serves 761-1100px (map hidden) and drops to the stage bottom <=760px. */ @media (min-width: 1101px) { .sdh-hero--split .sdh-stage-chip { display: none !important; } } @media (max-width: 760px) { .sdh-hero--split .sdh-locations { max-width: 100% !important; } .sdh-hero--split .sdh-stage-chip { top: auto !important; bottom: 14px !important; right: 14px !important; } /* Reserve a bottom band for the absolute "PLANO, TX" chip so the .sdh-sidecard ("Explore Soil Needs") link can never sit under it when content fills the stage. */ body.home .sdh-hero--split .sdh-stage .sdh-shell { padding-bottom: 60px !important; } } /* ============================================================ FULL-BLEED VIDEO HERO (SVG left panel scrapped 2026-06-07). .sdh-split is now one column; the copy sits in a centered content column over the full-width video. ============================================================ */ body.home .sdh-hero--split .sdh-stage { min-height: clamp(360px, calc(100svh - 360px), 600px); } /* shortened so the ~240px WHAT-WE-SUPPLY materials carousel is raised onto the first screen (header 119 + banner ~240) */ body.home .sdh-hero--split .sdh-stage .sdh-shell { position: relative; z-index: 2; width: min(1240px, calc(100% - 80px)); margin: 0 auto; height: 100%; display: flex; flex-direction: column; padding: clamp(12px,1.8vh,30px) 0; box-sizing: border-box; } /* the copy block stays a left-aligned card within that column */ /* Gap between the "SERVING TEXAS" locations capsule and the copy card below it (they were flush at 0px, the pill's bottom kissed the card's rounded top corner; Joshy images 11/12). Pad the copy column down for clean separation, both views. */ body.home .sdh-hero--split .sdh-stage .sdh-inner { justify-content: flex-start; align-items: start; min-height: 0; padding-top: clamp(14px, 1.6vw, 18px); } body.home .sdh-hero--split .sdh-stage .sdh-copy { max-width: 580px; } /* left scrim so the copy reads over the footage */ body.home .sdh-hero--split .sdh-stage-overlay { background: linear-gradient(90deg, rgba(13,9,5,.84) 0%, rgba(13,9,5,.6) 26%, rgba(13,9,5,.2) 48%, transparent 64%), linear-gradient(0deg, rgba(10,8,6,.5) 0%, transparent 24%), linear-gradient(180deg, rgba(10,8,6,.4) 0%, transparent 18%); } @media (max-width: 900px) { body.home .sdh-hero--split .sdh-stage { min-height: clamp(420px, 66svh, 600px); } body.home .sdh-hero--split .sdh-stage .sdh-shell { width: calc(100% - 40px); padding: 26px 0 30px; } } /* ---- Scripture verse: elegant staggered word reveal + gold shimmer ---- */ @keyframes sdVerseShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .sd-scripture .sd-vw { display: inline-block; opacity: 0; transform: translateY(24px) scale(.965); filter: blur(8px); transition: opacity .85s cubic-bezier(.2,.7,.15,1), transform .95s cubic-bezier(.2,.7,.15,1), filter .85s ease; transition-delay: calc(var(--i, 0) * 0.085s); will-change: opacity, transform, filter; } .sd-scripture.is-revealed .sd-vw { opacity: 1; transform: none; filter: blur(0); } /* emphasis words keep their drop-shadow through the blur reveal (background-clip text needs filter, not text-shadow) */ .sd-scripture .sd-vw.sd-sol-quote-emphasis { filter: blur(8px) drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .sd-scripture.is-revealed .sd-vw.sd-sol-quote-emphasis { filter: blur(0) drop-shadow(0 2px 6px rgba(0,0,0,.5)); } @media (prefers-reduced-motion: reduce) { .sd-scripture .sd-vw { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } .sd-scripture .sd-vw.sd-sol-quote-emphasis { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)) !important; } .sd-scripture .sd-sol-quote-emphasis { animation: none; } } /* ============================================================= NEED SOIL / HAVE SOIL quote sections - depth + drone image (kills the empty cream "blah"; scoped to the tagged form section) ============================================================= */ .sdp-quote-sec { position: relative; overflow: hidden; } .sdp-quote-sec .sdp-shell { position: relative; z-index: 1; } /* drone image card that fills the empty left column */ .sdp-qfig { position: relative; margin: 26px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 22px 50px rgba(75,46,30,.20); border: 1px solid rgba(107,63,36,.12); } .sdp-qfig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); } .sdp-qfig:hover img { transform: scale(1.045); } .sdp-qfig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(18,11,5,.62) 0%, rgba(18,11,5,.12) 34%, transparent 56%); } .sdp-qfig-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-shadow: 0 1px 6px rgba(0,0,0,.55); } .sdp-qfig-dot { width: 8px; height: 8px; border-radius: 50%; background: #36c069; box-shadow: 0 0 0 0 rgba(54,192,105,.6); animation: sdhPulse 2.4s ease-out infinite; } /* subtle life on the info cards */ .sdp-quote-sec .sdp-cb, .sdp-quote-sec .sdp-tip { transition: box-shadow .25s ease, transform .25s ease; } .sdp-quote-sec .sdp-cb:hover, .sdp-quote-sec .sdp-tip:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(75,46,30,.13); } @media (max-width: 860px) { .sdp-qfig { aspect-ratio: 16 / 9; margin-top: 22px; } } /* ============================================================= SITE-WIDE SOIL-STRATA LINES (refined, luxury, extremely subtle) Sediment layers (varied spacing + weight) that read on any bg. nav.js injects one layer per flat section band + calc embeds, and a single page-level layer where there are no section bands. Slow "settling" drift. Always behind cards/text. Never doubled. ============================================================= */ @keyframes sdTopoFlux { from { background-position: 50% 0; } to { background-position: 50% -1680px; } /* one full tile -> seamless loop (repeat-y) */ } .sd-topo, .sd-topo-host { position: relative; } .sd-topo > .sd-topo-layer, .sd-topo-host > .sd-topo-page { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27760%27%20height%3D%27620%27%20viewBox%3D%270%200%20760%20620%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f2e6cb%27%20stroke-opacity%3D%270.095%27%3E%3Cpath%20stroke-width%3D%271.3%27%20d%3D%27M-80%2024%20C%20170%2019%2C%20360%2029%2C%20540%2024%20S%20860%2019%2C%201000%2024%27%2F%3E%3Cpath%20stroke-width%3D%270.85%27%20d%3D%27M-80%2070%20C%20170%2062%2C%20360%2078%2C%20540%2070%20S%20860%2062%2C%201000%2070%27%2F%3E%3Cpath%20stroke-width%3D%271.1%27%20d%3D%27M-80%20130%20C%20170%20119%2C%20360%20141%2C%20540%20130%20S%20860%20119%2C%201000%20130%27%2F%3E%3Cpath%20stroke-width%3D%270.95%27%20d%3D%27M-80%20170%20C%20170%20156%2C%20360%20184%2C%20540%20170%20S%20860%20156%2C%201000%20170%27%2F%3E%3Cpath%20stroke-width%3D%271.2%27%20d%3D%27M-80%20236%20C%20170%20231%2C%20360%20241%2C%20540%20236%20S%20860%20231%2C%201000%20236%27%2F%3E%3Cpath%20stroke-width%3D%271.0%27%20d%3D%27M-80%20286%20C%20170%20278%2C%20360%20294%2C%20540%20286%20S%20860%20278%2C%201000%20286%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20d%3D%27M-80%20330%20C%20170%20319%2C%20360%20341%2C%20540%20330%20S%20860%20319%2C%201000%20330%27%2F%3E%3Cpath%20stroke-width%3D%270.85%27%20d%3D%27M-80%20392%20C%20170%20378%2C%20360%20406%2C%20540%20392%20S%20860%20378%2C%201000%20392%27%2F%3E%3Cpath%20stroke-width%3D%271.1%27%20d%3D%27M-80%20440%20C%20170%20435%2C%20360%20445%2C%20540%20440%20S%20860%20435%2C%201000%20440%27%2F%3E%3Cpath%20stroke-width%3D%270.95%27%20d%3D%27M-80%20496%20C%20170%20488%2C%20360%20504%2C%20540%20496%20S%20860%20488%2C%201000%20496%27%2F%3E%3Cpath%20stroke-width%3D%271.2%27%20d%3D%27M-80%20538%20C%20170%20527%2C%20360%20549%2C%20540%20538%20S%20860%20527%2C%201000%20538%27%2F%3E%3Cpath%20stroke-width%3D%271.0%27%20d%3D%27M-80%20596%20C%20170%20582%2C%20360%20610%2C%20540%20596%20S%20860%20582%2C%201000%20596%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2343291a%27%20stroke-opacity%3D%270.075%27%3E%3Cpath%20stroke-width%3D%271.3%27%20d%3D%27M-80%2024%20C%20170%2019%2C%20360%2029%2C%20540%2024%20S%20860%2019%2C%201000%2024%27%2F%3E%3Cpath%20stroke-width%3D%270.85%27%20d%3D%27M-80%2070%20C%20170%2062%2C%20360%2078%2C%20540%2070%20S%20860%2062%2C%201000%2070%27%2F%3E%3Cpath%20stroke-width%3D%271.1%27%20d%3D%27M-80%20130%20C%20170%20119%2C%20360%20141%2C%20540%20130%20S%20860%20119%2C%201000%20130%27%2F%3E%3Cpath%20stroke-width%3D%270.95%27%20d%3D%27M-80%20170%20C%20170%20156%2C%20360%20184%2C%20540%20170%20S%20860%20156%2C%201000%20170%27%2F%3E%3Cpath%20stroke-width%3D%271.2%27%20d%3D%27M-80%20236%20C%20170%20231%2C%20360%20241%2C%20540%20236%20S%20860%20231%2C%201000%20236%27%2F%3E%3Cpath%20stroke-width%3D%271.0%27%20d%3D%27M-80%20286%20C%20170%20278%2C%20360%20294%2C%20540%20286%20S%20860%20278%2C%201000%20286%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20d%3D%27M-80%20330%20C%20170%20319%2C%20360%20341%2C%20540%20330%20S%20860%20319%2C%201000%20330%27%2F%3E%3Cpath%20stroke-width%3D%270.85%27%20d%3D%27M-80%20392%20C%20170%20378%2C%20360%20406%2C%20540%20392%20S%20860%20378%2C%201000%20392%27%2F%3E%3Cpath%20stroke-width%3D%271.1%27%20d%3D%27M-80%20440%20C%20170%20435%2C%20360%20445%2C%20540%20440%20S%20860%20435%2C%201000%20440%27%2F%3E%3Cpath%20stroke-width%3D%270.95%27%20d%3D%27M-80%20496%20C%20170%20488%2C%20360%20504%2C%20540%20496%20S%20860%20488%2C%201000%20496%27%2F%3E%3Cpath%20stroke-width%3D%271.2%27%20d%3D%27M-80%20538%20C%20170%20527%2C%20360%20549%2C%20540%20538%20S%20860%20527%2C%201000%20538%27%2F%3E%3Cpath%20stroke-width%3D%271.0%27%20d%3D%27M-80%20596%20C%20170%20582%2C%20360%20610%2C%20540%20596%20S%20860%20582%2C%201000%20596%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* FIXED tile + repeat-y => identical line spacing on every section, any height. 1680px tile holds the 12-line pattern at need-soil's loved density (~1 line / 140px). */ background-repeat: repeat-y; background-size: 100% 1680px; -webkit-mask-image: radial-gradient(165% 160% at 50% 46%, #000 74%, rgba(0,0,0,.55) 100%); mask-image: radial-gradient(165% 160% at 50% 46%, #000 74%, rgba(0,0,0,.55) 100%); animation: sdTopoFlux 400s linear infinite; /* 50% slower (was 200s) - gentle settling drift */ } /* The always-on page-level BASE canvas spans the whole content column, so it gets a gentle VERTICAL fade (full strength through the body, soft only at the very top under the hero and the very bottom into the footer) instead of the per-section radial - that keeps the strata continuous behind everything with no blank gaps. */ .sd-topo-host > .sd-topo-page { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%); } /* ── Content imagery reveal-on-scroll (nav.js adds .sd-img-reveal, then .is-in). A gentle rise + fade so photos arrive with intent. The dimming only exists once JS has tagged the element, so images are always visible without JS. ── */ img.sd-img-reveal { opacity: 0; transform: translateY(16px) scale(.986); transition: opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1); } img.sd-img-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { img.sd-img-reveal { opacity: 1 !important; transform: none !important; transition: none; } } .sd-topo > *:not(.sd-topo-layer), .sd-topo-host > *:not(.sd-topo-page) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .sd-topo > .sd-topo-layer, .sd-topo-host > .sd-topo-page { animation: none; } } /* heroes flush to the nav on Service Areas + the four city pages, and the Resources hub + its guide pages (cinematic video heroes) (Astra puts an 80px margin-top on #primary.content-area) */ body.page-id-1527 .content-area, body.page-id-1528 .content-area, body.page-id-1529 .content-area, body.page-id-1530 .content-area, body.page-id-1531 .content-area, body.page-id-1798 .content-area, body.page-id-1799 .content-area, body.page-id-1800 .content-area, body.page-id-1801 .content-area, body.page-id-1802 .content-area, body.page-id-1837 .content-area, body.page-id-1838 .content-area { margin-top: 0 !important; padding-top: 0 !important; } /* ============================================================= WHITE "RECTANGLE" SECTIONS -> blended into the page cream so cards + text sit on one continuous lined canvas (no boxed block) ============================================================= */ .sdp-city-sec.sdp-city-bg-w, .sdp-sa-cards-sec, .sdp-sec.sdp-bg-w:not([class*="sdwm"]) { background: #F5F2E6 !important; } /* ============================================================= TEXT LEGIBILITY OVER THE LINES A soft halo in the local background color fades the strata right around any copy so text never muddles. Light sections get a cream halo; dark sections a dark halo. ============================================================= */ .sd-topo :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,address,figcaption,td,th,.sdp-lbl,.sdp-city-h2,.sdp-city-h3,.sdp-city-h1,.sdp-sa-map-title) { text-shadow: none; /* glow halo removed 2026-06-07: bled onto card/CTA text as an ugly glow */ } .sd-topo.sdp-bg-d :is(h1,h2,h3,h4,h5,h6,p,li,.sdp-lbl), .sd-topo.sdp-cta :is(h1,h2,h3,h4,p,.sdp-lbl) { text-shadow: none; } /* ============================================================ CITY PAGES: revamped "Soil Landscape" + Quick Facts section (was flat/dull). Scoped via `.sdp-city` so these beat the page-inline `.sdp-city-*` rules without editing each page. ============================================================ */ .sdp-city .sdp-city-cols { gap: 56px; } /* --- prose column --- */ .sdp-city .sdp-city-h2 { position: relative; padding-top: 20px; margin-bottom: 22px; font-size: clamp(30px, 3.9vw, 42px); line-height: 1.08; color: #1b1b1b; } .sdp-city .sdp-city-h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #1F7A3A, #ecd3a0); } .sdp-city .sdp-city-cols > div:first-child > .sdp-city-p:first-of-type { font-size: 18.5px; line-height: 1.72; color: #2a2824; font-weight: 500; } .sdp-city .sdp-city-p { color: #46433d; line-height: 1.75; } .sdp-city .sdp-city-cols > div:first-child > .sdp-city-h3 { font-family: 'DM Sans', system-ui, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: #1b1b1b; margin-top: 38px !important; padding: 3px 0 3px 16px; border-left: 3px solid #1F7A3A; } /* --- Quick Facts: premium sticky card --- */ .sdp-city .sdp-city-sidebar { position: sticky; top: 104px; padding: 0; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #faf6ec 100%); border: 1px solid rgba(31,122,58,.16); border-radius: 18px; box-shadow: 0 18px 46px rgba(75,46,30,.12); } .sdp-city .sdp-city-sidebar::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #1F7A3A, #3aa15e 35%, #ecd3a0 70%, #1F7A3A); } .sdp-city .sdp-city-sidebar .sdp-city-h3 { display: flex; align-items: center; gap: 9px; margin: 0; padding: 18px 24px 14px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #1F7A3A; border-bottom: 1px solid rgba(18,18,18,.07); } .sdp-city .sdp-city-sidebar .sdp-city-h3::before { content: ""; width: 18px; height: 18px; flex: none; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231F7A3A'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='8'%20y='3'%20width='8'%20height='4'%20rx='1'/%3E%3Cpath%20d='M9%205H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-3'/%3E%3Cpath%20d='M8%2013h8'/%3E%3Cpath%20d='M8%2017h5'/%3E%3C/svg%3E"); } .sdp-city .sdp-city-facts { padding: 8px 24px 18px; } .sdp-city .sdp-city-facts li { padding: 13px 0; gap: 16px; align-items: baseline; border-bottom: 1px solid rgba(18,18,18,.06); } .sdp-city .sdp-city-facts-label { position: relative; padding-left: 15px; max-width: 52%; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8a8578; } .sdp-city .sdp-city-facts-label::before { content: ""; position: absolute; left: 0; top: .35em; width: 6px; height: 6px; border-radius: 1.5px; transform: rotate(45deg); background: #c49a3a; } .sdp-city .sdp-city-facts-val { font-size: 15px; font-weight: 800; color: #1b1b1b; } @media (max-width: 768px) { .sdp-city .sdp-city-sidebar { position: static; } .sdp-city .sdp-city-cols { gap: 32px; } } /* ===== Mobile polish pass (2026-06-08): min label legibility + tap area ===== Several micro-labels live in per-post inline