1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<!-- fm:gsc --> 5<meta name="google-site-verification" content="QpEeCmdWwnPNARZiMStbkTkUzeOlaJjdxlBZ3YAEKlk" /> 6 7<!-- fm:ga4 -->
vendor: 65 bytes, lines 7-8
7 8<script async src="https://www.googletagmanager.com/gtag/js?id=
8G-FZR6EVZ3YF
vendor: 13 bytes, line 8
8"></script>
9<script> 10
vendor: 136 bytes, lines 10-13
10window.dataLayer = window.dataLayer || []; 11 function gtag(){dataLayer.push(arguments);} 12 gtag('js', new Date()); 13 gtag('config', '
13G-FZR6EVZ3YF
vendor: 5 bytes, line 13
13');
14</script>
14 15<!-- /fm:ga4 --> 16 17<meta charset="UTF-8"> 18<meta name="viewport" content="width=device-width, initial-scale=1.0"> 19<title>Contact FreshMinistries | Jacksonville, FL</title> 20<link rel="canonical" href="https://freshministries.org/contact"> 21<meta name="description" content="Reach FreshMinistries in Jacksonville. Send a message, call headquarters at 904-355-0000, or find us at one of our four doors across the city."> 22<link rel="preconnect" href="https://fonts.googleapis.com"> 23<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 24<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Space+Mono&display=swap" rel="stylesheet"> 25<link rel="stylesheet" href="/fm-system.css"> 26 27<!-- FOUC guard: the hero text hides from FIRST PAINT, but only when the entrance will run 28 (JS on + motion OK). heroEntrance() unhides each piece exactly as its start state is 29 pinned, every bail path unhides, and a 3.5s failsafe unhides -- text can never stick 30 hidden. State-scoped descendant selectors = animation-layer CSS -> deliberate embed 31 in the Webflow port. -->
32<script>(function(){try{if(!(window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches)){document.documentElement.className+=' fm-anim'}}catch(e){}})();</script>
32 33<style> 34.fm-anim .dhero_kick,.fm-anim .dhero_title,.fm-anim .dhero_sub,.fm-anim .dhero_btn{visibility:hidden} 35</style> 36 37<!-- ============================================================ 38 FRESH MINISTRIES -- CONTACT (new page, 2026-07-10) 39 Built per Pete's spec: "just a picture and a contact form, then 40 the locations and international locations, with a Give CTA at 41 the end instead of the news." Follows the Weaver template for 42 chrome, section rhythm, headline classes, and hero animation. 43 Stack: nav-wave-menu (LIGHT-PAGE variant, about.html verbatim + 44 Volunteer + Contact links) / 45 1. LIGHT HERO (dhero_*, Weaver split-text sweep + FOUC guard, 46 SKY sweep on the H1). CENTERED on the canonical grid, 47 mirroring the volunteer.html light hero: colorbar kicker, H1, 48 short intro, one primary CTA = a real tel: action, not an 49 on-page anchor (MASTER-RULES 3.4: never anchor the next thing). 50 1.5 FULL-WIDTH IMAGE BAND (mbreak, scroll-zoom) -- the 51 volunteer.html media-break, in-column on the canonical grid, 52 scrub-zooms 1.12 -> 1. Photo picked LAST (phlab placeholder). 53 2. CONTACT FORM -- C6-A layout (PICKS-BUILD-2026-07-29, kit 54 _kit-c68-misc.html): centered heading + centered form card, 55 "what to expect" context beneath. Brand chips = contact 56 TOPICS (MASTER-RULES 5.2). Markup ships inert (notice + 57 disabled); fm-forms.js activates + submits at runtime -- 58 wiring/routing untouched (PM-793 open). 59 3. LOCATIONS -- the verified loc_* block from get-involved.html 60 (addresses + phones sourced there VERBATIM from contact.md): 61 4 Jacksonville doors + the International country list. 62 4. GIVE CTA (ctafeat_*, get-involved.html pattern) -- REPLACES 63 the Weaver latest-news band, per Pete. Fades white -> 64 #c7e9f4 and hands off to the footer's navy dome. 65 5. v2-footer (about.html verbatim). 66 GRADIENT / TRANSITION LAW (MASTER-RULES 1.0): every seam is a 67 SMOOTH color-matched FADE, no hard cuts. All body sections live 68 in the LIGHT lane; the ONLY dome is the footer signature. 69 hero #fff -> #ebf1f7 70 band #ebf1f7 (flush -- opens on the hero's end color) 71 form #ebf1f7 -> #fff (opens on the band's color) 72 loc #fff (flush white both sides) 73 give #fff -> #c7e9f4 (opens flush white) 74 footer navy dome over #c7e9f4 (margin-top:-6vh) 75 Shared CDN loaded ONCE near the end of <body>: GSAP 3.13 core + 76 ScrollTrigger + SplitText. NO Three.js, zero WebGL (3.7). 77 Photos come LAST: every image slot is a gradient phlab 78 placeholder with data-label + data-img, for Pete's picker. 79 ============================================================ --> 80 81<!-- FLAG (form provider + Netlify detection): the contact form ships action="#" as a 82 wireframe (submit prevented in JS), matching every other form in the repo. OPEN #3 in 83 MASTER-RULES assigns volunteer/contact -> Bloomerang; confirm the provider, then wire it 84 and enable Netlify form detection (processing.html_forms) + redeploy before "functional". --> 85<!-- FLAG (international list, PM-578): the International block shows country NAMES only (no 86 "Be The Change International" branding), matching the get-involved.html precedent. PM-578 87 holds BTC-International branding out of forward materials until sequencing clears -- keep 88 this to place names; confirm before publish. --> 89 90<!-- ============================================================ 91 PAGE-LOCAL HELPERS 92 Converter-clean: class-only, single-underscore BEM, REM, 93 Webflow breakpoints 991/767/479. No :root/body/token dupes. 94 ============================================================ --> 95<style> 96/* empty photo slot = subtle dotted gradient, NO label text on production (Pete 2026-07-29) */ 97.phlab{position:relative} 98.phlab::after{content:"";position:absolute;inset:0; 99 background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px);background-size:14px 14px} 100 101/* quality floor: visible keyboard focus on the shared button system (light context) */
102.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} 103</style> 104 105<!-- ============================================================ 106 NAV + WAVE OVERLAY MENU -- LIGHT-PAGE variant, about.html 107 verbatim (blue-ink over the white hero, single ink logo). 108 Class-only, single-underscore BEM, REM, breakpoints 991/767/479. 109 ============================================================ --> 110<style> 111/* NAV -- fixed header; base = transparent over the light hero, blue-ink icons */ 112.topnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;color:var(--blue-ink); 113 padding:1.25rem clamp(1.5rem,2.8vw,2.875rem); 114 transition:transform .42s cubic-bezier(.45,0,.15,1),padding .35s,background .35s,box-shadow .35s,color .35s,opacity .3s ease,visibility .3s ease} 115.topnav.is-scrolled{padding:.75rem clamp(1.5rem,2.8vw,2.875rem);background:#fff;color:var(--blue-ink);box-shadow:0 1px 0 #e6ecf3,0 14px 34px -28px rgba(20,38,74,.5)} 116.topnav.is-tucked{transform:translateY(-100%)} 117.topnav.is-away{opacity:0;visibility:hidden;pointer-events:none} 118/* r22: menu-open state -- the nav bar STAYS PUT (z-60, above the z-55 overlay) so the ONE 119 hamburger morphs to X in place; everything else in the bar fades out. margin-right:var(--sbw) 120 offsets the vanished scrollbar so the toggle doesn't teleport when body scroll locks. */ 121.topnav.is-menu{background:transparent;box-shadow:none;color:#fff;margin-right:var(--sbw,0px)} 122.topnav.is-menu .topnav_brand,.topnav.is-menu .topnav_search,.topnav.is-menu .topnav_give{opacity:0;pointer-events:none} 123.topnav_brand,.topnav_search{transition:opacity .25s} 124 125.topnav_brand{position:relative;display:inline-flex;align-items:center} 126.topnav_logo{height:3.125rem;width:auto;transition:height .35s cubic-bezier(.45,0,.15,1),opacity .3s ease;display:block} 127.topnav_logo.is-small{height:2.5rem} 128/* LIGHT-PAGE nav: single ink logo (white/ink crossfade removed with the dark hero) */ 129 130.topnav_right{display:flex;align-items:center;gap:1.125rem} 131.topnav_search{display:inline-flex;align-items:center;justify-content:center;width:2.625rem;height:2.625rem;border-radius:50%;color:inherit;transition:color .25s,background .25s} 132.topnav_search:hover{color:var(--sky);background:rgba(0,154,206,.12)} 133.topnav_search-svg{display:block} 134.topnav_give{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;background:var(--orange);padding:.6875rem 1.625rem;border-radius:999px;box-shadow:0 8px 22px -10px rgba(235,144,62,.75);transition:background .25s,color .25s,box-shadow .25s,transform .25s,opacity .25s} 135.topnav_give:hover{background:var(--red);color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(230,60,52,.75)} 136/* quality floor: visible keyboard focus (currentColor adapts dark hero / white scrolled bar) */ 137.topnav_search:focus-visible,.topnav_give:focus-visible,.topnav_toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:.625rem} 138 139/* hamburger -- visible on desktop too (opens the wave overlay). Bars inherit 140 the nav's currentColor so they invert with the scroll state automatically. */ 141.topnav_toggle{display:inline-flex;width:3.25rem;height:3.25rem;flex-direction:column;align-items:center;justify-content:center;gap:.4375rem; 142 border:none;background:transparent;cursor:pointer;padding:0;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .2s ease} 143.topnav_toggle:active{transform:scale(.9)} 144.topnav_bar{display:block;width:2.125rem;height:.15625rem;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s,background .3s,width .25s ease} 145.topnav_toggle:hover .topnav_bar-mid{width:1.4375rem} 146.topnav_bar-top.is-open{transform:translateY(.59375rem) rotate(45deg);background:#fff} 147.topnav_bar-mid.is-open{opacity:0;background:#fff} 148.topnav_bar-bot.is-open{transform:translateY(-.59375rem) rotate(-45deg);background:#fff} 149.topnav_toggle:hover .topnav_bar-top.is-open,.topnav_toggle:hover .topnav_bar-bot.
149is-open{background:var(--red)} 150 151 152@media(max-width:991px){ 153 .topnav_search,.topnav_give{display:none} 154} 155@media(max-width:767px){ 156 .topnav{padding:.7rem clamp(1.1rem,4.6vw,1.5rem)} 157 .topnav.is-scrolled{padding:.4rem clamp(1.1rem,4.6vw,1.5rem)} 158 .topnav_logo{height:2.8rem} 159 .topnav_logo.is-small{height:1.9375rem} 160 .topnav_toggle{width:2.625rem;height:2.625rem;margin-left:.75rem} 161 .topnav_bar{width:1.75rem} 162} 163@media(prefers-reduced-motion:reduce){ 164 .topnav,.topnav_bar{transition:none} 165} 166</style> 167<style> 168/* PHOTOS (placed 2026-07-14). The gradient placeholder DIV is kept -- it owns the layout and the 169 scroll-scrub transform -- and gains .has-img plus an <img class="ph_img"> child that fills it. 170 .has-img kills the phlab caption overlay. Slots with no honest photo keep their gradient. */ 171.ph_img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;-webkit-user-drag:none} 172.phlab.has-img::after{content:none} 173/* NEVER CROP A FACE -- the wide bands. The slot is WIDER than the photo, so object-fit:cover trims 174 vertically; and the scroll-scrub zooms the media to 1.12. Both would eat the tops of heads. 175 Anchoring the cover window AND the zoom origin to the TOP means the trim always comes off the 176 bottom (gowns, floor) and never off a face. */ 177.mbreak_media,.zoomband_media{transform-origin:50% 0%} 178.mbreak_media .ph_img,.zoomband_media .ph_img{object-position:50% 0%} 179 180.prog_ph.has-img,.goals_ph.has-img,.serve_ph.has-img,.story_pairimg.has-img,.split_photo.has-img, 181.form_asideimg.has-img,.ctafeat_duo-ph.has-img,.ctafeat_ph.has-img{background:#dde5ee} 182</style> 183<style> 184/* JOB 4 -- the contact form is DISABLED until FM picks a backend (see the flag in the markup). 185 The notice is styled as a deliberate callout, and the disabled fields read as intentionally 186 parked rather than broken. */ 187.form_fs{border:0;padding:0;margin:0;min-width:0} 188.form_notice{border:1px solid var(--line);border-left:.25rem solid var(--orange);border-radius:var(--radius-sm); 189 background:linear-gradient(180deg,#fffaf4,#fff);padding:1.125rem 1.25rem;margin:0 0 1.75rem} 190.form_notice-h{font-family:var(--body);font-weight:700;font-size:.9375rem;color:var(--text-strong);margin:0 0 .375rem} 191.form_notice-p{font-family:var(--body);font-size:.875rem;line-height:1.6;color:var(--text-body);margin:0} 192.form_notice-a{color:var(--blue);font-weight:600;text-decoration:underline} 193.form_notice-a:hover{color:var(--sky)} 194.form_notice-a:focus-visible{outline:2px solid var(--blue);outline-offset:2px} 195.form_fs:disabled .form_input{background:var(--cloud);opacity:.7;cursor:not-allowed} 196.form_fs:disabled .form_chip{opacity:.6;cursor:not-allowed} 197.form_submit:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.25)} 198</style> 199 200 201 202<!-- FM-NAV-FS:CSS --> 203<style id="fm-nav-fs"> 204/* self-contained: don't rely on a global reset for the overlay's box model */ 205.nav2,.nav2 *{box-sizing:border-box} 206 207/* ============================================================ 208 FRESHMINISTRIES -- FULL-SCREEN NAV OVERLAY (FS) 209 BUILD WAVE 2026-07-29 (BW-NAV-IA, PM-800 picks): desktop is C1-C 210 "The Horizon" -- search top center, one horizontal line of the 211 seven sections mid-screen, the 7-color runner resting on the rule 212 and gliding under the active item, detail panes in a fixed stage 213 below the line. Mobile (<=860px) is C1-B "Reading Order" -- search 214 on top, flush-left accordion, overview link first, indent killed. 215 Layers: nav2_solid (0, sliver-proof floor) < nav2_wave (1) < nav2_grid (2) 216 Sits at z-55, BELOW the z-60 .topnav, so the ONE hamburger (#navToggle) 217 morphs to X in place above the navy and stays the close control. 218 The 7/18 click-through gate lives in fm-system.css: 219 .nav2:not(.is-open):not(.is-wave) .nav2_panel{pointer-events:none} 220 Panels here MUST keep the .nav2_panel class or the gate stops 221 protecting them (the "squirrelly buttons" lesson). 222 NO SCROLLBARS in panes (locked): panes are overflow:hidden and 223 sized to fit; only the mobile sheet may scroll (hairline style). 224 ============================================================ */ 225.nav2{position:fixed;inset:0;z-index:55;opacity:0;visibility:hidden; 226 transition:opacity .4s ease,visibility .4s ease; 227 /* PROPOSED token (C1 kit): Foundation Blue lifted for navy ground -- raw 228 #295099 disappears on navy. Same hue, legible. Earn bucket label only. */ 229 --earnb:#7aa3e6} 230.nav2.is-open{opacity:1;visibility:visible} 231.nav2.is-wave{opacity:1;visibility:visible;transition:none} /* GSAP owns the reveal, no fade */ 232.nav2:focus{outline:none} 233 234/* --- SLIVER FIX: a solid navy floor the SAME hex as the lowest gradient stop,
235 stretched over the whole viewport BEHIND the wave. Transparent while the 236 wave sweeps (so the reveal still reads), then snapped opaque once the wave 237 has covered the screen -- the bottom edge can never show a page sliver. --- */ 238.nav2_solid{position:absolute;inset:0;z-index:0;background:var(--wave-floor,#0c1426);opacity:0;pointer-events:none; 239 transition:opacity .2s linear} 240.nav2.is-covered .nav2_solid{opacity:1} 241 242.nav2_wave{position:absolute;inset:0;z-index:1;pointer-events:none} 243.nav2_wave-svg{width:100%;height:100%;display:block} 244.nav2_wave-path{fill:url(#fsWaveFill)} 245 246/* --- content plane: ONE centered column. Search at the top, the horizon 247 line vertically centered, panes hanging in a fixed stage below it. --- */ 248.nav2_grid{position:relative;z-index:2;height:100%;width:100%; 249 display:flex;flex-direction:column;align-items:center; 250 padding:clamp(4.5rem,9vh,6.5rem) clamp(1.5rem,4vw,3rem) clamp(2rem,5vh,3rem); 251 opacity:0} 252.nav2.is-open .nav2_grid{opacity:1} 253.nav2.is-wave .nav2_grid{opacity:1} 254 255/* ---------- IN-MENU SEARCH (locked). A button styled as the kit's quiet 256 hairline field; clicking it opens the sitewide fm-search overlay 257 (z-2000, above this z-55 menu), which owns the real input. ---------- */ 258.nav2_search{display:flex;align-items:center;gap:.75rem;width:100%;max-width:22rem; 259 border:0;border-bottom:1px solid rgba(255,255,255,.28);background:none;cursor:pointer; 260 padding:.5625rem .25rem;margin:0 0 auto;color:rgba(255,255,255,.85); 261 font-family:var(--body);font-size:1rem;text-align:left; 262 transition:border-color .25s,color .25s} 263.nav2_search:hover{color:#fff;border-color:rgba(255,255,255,.55)} 264.nav2_search:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:2px} 265.nav2_search svg{width:1.125rem;height:1.125rem;flex:none} 266.nav2_search-t{color:rgba(255,255,255,.42);transition:color .25s} 267.nav2_search:hover .nav2_search-t{color:rgba(255,255,255,.75)} 268 269/* ---------- THE LINE (C1-C horizon; becomes the accordion column on mobile) ---------- */ 270.nav2_list{position:relative;display:flex;gap:clamp(1.5rem,2.6vw,3rem);align-items:baseline;justify-content:center; 271 width:100%;max-width:76rem;padding-bottom:1.125rem;margin-bottom:auto; 272 border-bottom:1px solid rgba(255,255,255,.18)} 273.nav2_group{display:contents} /* heads join the line directly; panes position from .nav2_list */ 274.nav2_head{display:inline-flex;align-items:center;gap:.75rem} 275.nav2_item{position:relative;display:inline-flex;align-items:center; 276 font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.85vw,1.6875rem);line-height:1.2; 277 color:rgba(255,255,255,.8);text-decoration:none;padding:0;cursor:pointer;background:none;border:0;text-align:left; 278 transition:color .25s ease} 279.nav2_item:hover,.nav2_item.is-active{color:#fff} 280.nav2_item:focus-visible{outline:2px solid var(--c,var(--sky));outline-offset:6px;border-radius:.35rem;color:#fff} 281/* GIVE -- orange at rest AND active: the one colored word on the line */ 282.nav2_item-give{color:var(--orange)} 283.nav2_item-give:hover,.nav2_item-give.is-active,.nav2_item-give:focus-visible{color:var(--orange)} 284 285/* the 7-color runner: rests centered on the horizon like a kicker, then glides 286 under whatever you touch (JS sets width + translateX; desktop only) */ 287.nav2_runner{position:absolute;bottom:-2px;left:0;height:3px;width:14rem;border-radius:2px;pointer-events:none; 288 background:linear-gradient(90deg,var(--blue),var(--sky),var(--teal),var(--yellow),var(--orange),var(--red),var(--purple)); 289 transition:transform .45s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1)} 290 291/* caret toggle -- MOBILE ONLY (accordion) */ 292.nav2_caret{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex:0 0 auto; 293 background:none;border:0;color:rgba(255,255,255,.62);cursor:pointer;-webkit-tap-highlight-color:transparent; 294 border-radius:.5rem;transition:color .2s} 295.nav2_caret:hover{color:#fff} 296.nav2_caret:focus-visible{outline:2px solid var(--sky);outline-offset:2px} 297.nav2_caret svg{width:1.5rem;height:1.5rem;display:block;transition:transform .3s cubic-bezier(.2,.7,.2,1)} 298.nav2_caret[aria-expanded="true"] svg{transform:rotate(180deg)} 299 300/* ---------- DETAIL PANES (the fixed stage below the line) ---------- 301 Absolutely stacked children of .nav2_list, so on mobile the same panels 302 fall back inline under their heads as the accordion. overflow:hidden -- 303 the no-scrollbar rule is locked; pane content is sized to fit. */ 304.nav2_panel{position:absolute;
304left:0;right:0;top:calc(100% + clamp(1.25rem,3.5vh,2.25rem)); 305 height:clamp(13rem,36vh,18.5rem); 306 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.125rem;text-align:center; 307 opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;overflow:hidden; 308 transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .35s} 309.nav2_panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto; 310 transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s 0s} 311 312/* overview link -- ONE element, two voices: desktop reads "Go to X" and sits 313 LAST in the pane (C1-C); mobile reads "X overview" and sits FIRST (C1-B). */ 314.nav2_over{display:inline-flex;align-items:center;gap:.4375rem;order:9; 315 font-family:var(--body);font-weight:600;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase; 316 color:var(--pc,var(--sky));text-decoration:none;transition:color .2s} 317.nav2_over::after{content:"\2192";letter-spacing:0;transition:transform .2s} 318.nav2_over:hover,.nav2_over:focus-visible{color:#fff;outline:none} 319.nav2_over:hover::after,.nav2_over:focus-visible::after{transform:translateX(4px)} 320.nav2_over:focus-visible{outline:2px solid var(--pc,var(--sky));outline-offset:4px;border-radius:.35rem} 321.nav2_over-ov{display:none} 322 323/* pane content grammar (kit .s- classes, productionised) */ 324.nav2_subrow{display:flex;gap:1rem 2.75rem;justify-content:center;flex-wrap:wrap} 325.nav2_subrow-sm{gap:.625rem 2rem;max-width:66rem} 326.nav2_sub{font-family:var(--display);font-weight:400;font-size:1.375rem;line-height:1.3;color:rgba(255,255,255,.92); 327 text-decoration:none;transition:color .2s} 328.nav2_sub:hover,.nav2_sub:focus-visible{color:var(--pc,var(--sky));outline:none} 329.nav2_sub:focus-visible{outline:2px solid var(--pc,var(--sky));outline-offset:4px;border-radius:.25rem} 330.nav2_sub-sm{font-size:1.125rem} 331.nav2_mini{font-family:var(--body);font-weight:700;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase; 332 color:rgba(255,255,255,.42);margin:.375rem 0 0} 333.nav2_quiet{font-family:var(--body);font-size:.9375rem;color:rgba(255,255,255,.55);margin:1rem 0 0} 334 335/* Programs pane: the four pillar buckets (locked order Learn / Earn / Eat / Heal) */ 336.nav2_bkts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.25rem;width:100%;max-width:68rem;text-align:left} 337.nav2_bkt{display:flex;flex-direction:column;gap:.4375rem} 338.nav2_bktlabel{display:inline-flex;align-items:center;gap:.5625rem;font-family:var(--body);font-weight:700; 339 font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bc,var(--sky));margin:0 0 .1875rem} 340.nav2_bktlabel::before{content:"";width:1.375rem;height:3px;border-radius:2px;background:var(--bc,var(--sky));flex:none} 341.nav2_bktlink{font-family:var(--display);font-weight:400;font-size:1.125rem;line-height:1.3; 342 color:rgba(255,255,255,.92);text-decoration:none;padding:.1875rem 0;transition:color .2s} 343.nav2_bktlink:hover,.nav2_bktlink:focus-visible{color:var(--bc,var(--sky));outline:none} 344.nav2_bktlink:focus-visible{outline:2px solid var(--bc,var(--sky));outline-offset:3px;border-radius:.25rem} 345.nav2_bktmore{font-family:var(--body);font-size:.8125rem;color:rgba(255,255,255,.5);text-decoration:none; 346 padding:.1875rem 0;transition:color .2s} 347.nav2_bktmore:hover,.nav2_bktmore:focus-visible{color:#fff;outline:none} 348.nav2_bktmore:focus-visible{outline:2px solid var(--bc,var(--sky));outline-offset:3px;border-radius:.25rem} 349 350/* News pane: three story cards. fm-cms.js (initNavNews) re-renders these rows 351 with the SAME classes -- .nav2_row / .nav2_rowname / .nav2_rowdesc names are 352 load-bearing, do not rename. */ 353.nav2_newslist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem;width:100%;max-width:62rem;text-align:left} 354.nav2_row{display:flex;flex-direction:column;gap:.4375rem;text-decoration:none} 355.nav2_rowname{font-family:var(--display);font-weight:400;font-size:1.125rem;line-height:1.3;color:#fff;margin:0; 356 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .2s} 357.nav2_row:hover .nav2_rowname,.nav2_row:focus-visible .nav2_rowname{color:var(--pc,var(--orange))} 358.nav2_row:focus-visible{outline:2px solid var(--pc,var(--orange));outline-offset:4px;border-radius:.25rem} 359.nav2_rowdesc{font-family:var(--body);font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.5);margin:0; 360 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} 361 362/* Follow pane: icon + wordmark, one quiet row */ 363.nav2_soc{display:flex;gap:2.25rem;justify-content:center;flex-wrap:wrap} 364.nav2_social-row{display:inline-flex;align-items:center;gap:.625rem;text-decoration:none; 365 color:rgba(255,255,255,.85);transition:color .2s} 366.nav2_social-ico{display:inline-flex;color:currentColor} 367.nav2_social-ico svg{width:1.375rem;height:1.375rem;display:block} 368.nav2_social-name{font-family:var(--display);font-weight:400;font-size:1.25rem;color:currentColor} 369.nav2_social-row:hover,.nav2_social-row:focus-visible{color:var(--pc,var(--sky));outline:none} 370.nav2_social-row:focus-visible{outline:2px solid var(--pc,var(--sky));outline-offset:4px;border-radius:.25rem} 371 372/* ============================================================ 373 RESPONSIVE -- C1-B "Reading Order" accordion: search on top, 374 flush-left children, overview link first, indent killed. 375 ============================================================ */ 376@media(max-width:860px){ 377 .nav2_grid{display:block;height:100%;overflow-y:auto; 378 padding:clamp(4.5rem,10vh,7rem) 8vw clamp(2rem,6vh,3rem); 379 /* if the sheet must scroll, a navy hairline, never the fat chrome bar (hit list 7/24) */ 380 scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent} 381 .nav2_search{max-width:none;margin:0 0 1.5rem} 382 .nav2_list{display:flex;flex-direction:column;align-items:stretch;gap:.15rem; 383 max-width:none;border-bottom:0;padding-bottom:0;margin-bottom:0} 384 .nav2_runner{display:none}
385 .nav2_group{display:flex;flex-direction:column;align-items:stretch;width:100%} 386 .nav2_head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem} 387 .nav2_item{font-size:clamp(1.75rem,7vw,2.4rem);padding:.14em 0} 388 .nav2_caret{display:inline-flex} 389 .nav2_group-follow{margin-top:clamp(1rem,3vh,1.75rem)} 390 .nav2_panel{position:static;height:auto;transform:none;opacity:1;visibility:visible;overflow:visible; 391 display:none;padding:.15rem 0 1.1rem;gap:.125rem;align-items:flex-start;text-align:left} 392 .nav2_panel.is-active{display:flex} 393 .nav2_over{order:0;padding:.25rem 0 .625rem;font-weight:700;font-size:.75rem;letter-spacing:.12em} 394 .nav2_over-go{display:none} 395 .nav2_over-ov{display:inline} 396 .nav2_subrow{flex-direction:column;align-items:flex-start;gap:0} 397 .nav2_sub{font-size:1.1875rem;padding:.3125rem 0} 398 .nav2_sub-sm{font-size:1.0625rem} 399 .nav2_mini{margin:.625rem 0 .125rem} 400 .nav2_bkts{display:flex;flex-direction:column;gap:0;max-width:none} 401 .nav2_bkt{gap:0} 402 .nav2_bktlabel{margin:.625rem 0 .125rem} 403 .nav2_bktlabel::before{width:1.125rem} 404 .nav2_bktlink{font-size:1.1875rem;padding:.3125rem 0} 405 .nav2_soc{flex-direction:column;align-items:flex-start;gap:0} 406 .nav2_social-row{padding:.3125rem 0} 407 .nav2_default{display:none !important} 408} 409 410/* reduced motion */ 411@media(prefers-reduced-motion:reduce){ 412 .nav2,.nav2_grid,.nav2_panel,.nav2_item,.nav2_runner,.nav2_sub,.nav2_over,.nav2_row, 413 .nav2_bktlink,.nav2_social-row,.nav2_search,.topnav_bar,.nav2_wave-path{ 414 transition:none !important} 415} 416 417/* Hamburger visible on ALL viewports now the FS overlay is the only nav. 418 (Belt-and-suspenders: the base .topnav_toggle is already inline-flex; this 419 also neutralises any stray .fmm markup if a legacy block ever survives.) */ 420.topnav .topnav_toggle{display:inline-flex} 421.topnav .fmm{display:none} 422 423/* ============================================================ 424 TOPNAV SEARCH TRIGGER + RIGHT-CLUSTER SPACING 425 fm-search.js injects <button class="fmsx_trigger"> back into .topnav_right 426 (the old <a class="topnav_search"> markup was removed 2026-07-14, so the base 427 .topnav_search rules no longer apply to anything). These HEAD rules present that 428 button correctly from FIRST PAINT -- never the browser's native grey button box -- 429 keep it visible on mobile where the base CSS hid the old search markup, and give 430 the right cluster real spacing so the hamburger isn't jammed in the corner. 431 fm-search.js layers its own hover / focus-visible / transition on top; the 432 lower-specificity .fmsx_trigger rules there do not conflict with these. 433 ============================================================ */ 434.topnav_right .fmsx_trigger{-webkit-appearance:none;appearance:none; 435 display:inline-flex;align-items:center;justify-content:center; 436 width:2.625rem;height:2.625rem;border-radius:50%; 437 background:none;border:0;padding:0;margin:0;box-shadow:none;font:inherit; 438 color:inherit;cursor:pointer} 439/* the search trigger is the replacement for the removed .topnav_search: keep it 440 shown on the viewports where the base CSS hides the old search/give markup */ 441@media(max-width:991px){ 442 .topnav_right .fmsx_trigger{display:inline-flex} 443} 444@media(max-width:767px){ 445 /* hit list 7/24: padding-right override REMOVED -- base .topnav shorthand pads both edges equally (right edge = left logo edge) */ 446 .topnav .topnav_right{gap:.75rem} /* search sits tight NEXT TO the hamburger; .topnav prefix wins the cascade on home, where the base topnav CSS bakes AFTER this block */ 447 .topnav .topnav_toggle{margin-left:0} 448 .topnav .topnav_brand{min-width:0;flex:0 1 auto;margin-right:.75rem} /* the wide wordmark yields under squeeze; it never presses the search icon */ 449 .topnav .topnav_logo{max-width:100%;object-fit:contain;object-position:left center} 450} 451</style> 452<!-- /FM-NAV-FS:CSS --> 453<!-- FM-SEO-HEAD:START (scripts/seo-head-inject.py -- do not hand-edit) --> 454<link rel="icon" href="/favicon.ico" sizes="48x48"> 455<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32.png"> 456<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16.png"> 457<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 458<link rel="manifest" href="/site.webmanifest"> 459<meta name="theme-color" content="#295099"> 460<meta property="og:type" content="website"> 461<meta property="og:site_name" content="FreshMinistries"> 462<meta property="og:title" content="Contact FreshMinistries | Jacksonville, FL"> 463<meta property="og:description" content="Reach FreshMinistries in Jacksonville. Send a message, call headquarters at 904-355-0000, or find us at one of our four doors across the city."> 464<meta property="og:url" content="https://freshministries.org/contact"> 465<meta property="og:image" content="https://freshministries.org/img/og/contact.jpg">
466<meta property="og:image:width" content="1200"> 467<meta property="og:image:height" content="630"> 468<meta name="twitter:card" content="summary_large_image"> 469<meta name="twitter:title" content="Contact FreshMinistries | Jacksonville, FL"> 470<meta name="twitter:description" content="Reach FreshMinistries in Jacksonville. Send a message, call headquarters at 904-355-0000, or find us at one of our four doors across the city."> 471<meta name="twitter:image" content="https://freshministries.org/img/og/contact.jpg">
472<script type="application/ld+json">{"@context": "https://schema.org", "@type": "NGO", "name": "FreshMinistries", "alternateName": "Be The Change International", "url": "https://freshministries.org", "logo": "https://freshministries.org/img/fm-logo.png", "image": "https://freshministries.org/img/og-share.jpg", "description": "FreshMinistries is a Jacksonville, Florida nonprofit working to end poverty through workforce training, urban aquaponics, outpatient counseling, and youth programs.", "foundingDate": "1989", "taxID": "59-2967898", "address": {"@type": "PostalAddress", "streetAddress": "1131 N Laura Street", "addressLocality": "Jacksonville", "addressRegion": "FL", "postalCode": "32202", "addressCountry": "US"}, "sameAs": ["https://www.facebook.com/FreshMinistries/", "https://www.instagram.com/freshministries/", "https://www.youtube.com/channel/UCqlwglTByp-dF7UKQKvtSyw", "https://www.linkedin.com/company/fresh-ministries-inc/"], "contactPoint": {"@type": "ContactPoint", "telephone": "+1-904-355-0000", "contactType": "customer service", "areaServed": "US", "availableLanguage": "English"}}</script>
472 473<!-- FM-SEO-HEAD:END --> 474</head> 475<body class="fm-body" style="margin:0;background:#fff;overflow-x:hidden"> 476 477<nav class="topnav" id="topnav"> 478 <a class="topnav_brand" href="/" aria-label="FreshMinistries home"> 479 <img class="topnav_logo" src="/img/fm-logo.svg" alt="FreshMinistries" data-img="logo-nav"> 480 </a> 481 482 483 484 <div class="topnav_right"> 485 <!-- sitewide standard (elevation spec): the Give pill routes to OUR give page, never straight to Bloomerang --> 486 <a class="topnav_give" href="/give">Give</a> 487 <button class="topnav_toggle" id="navToggle" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="fsMenu"> 488 <span class="topnav_bar topnav_bar-top"></span><span class="topnav_bar topnav_bar-mid"></span><span class="topnav_bar topnav_bar-bot"></span> 489 </button> 490 </div> 491</nav> 492<!-- FM-NAV-FS:MARKUP --> 493<!-- ============================================================ 494 FRESHMINISTRIES -- FULL-SCREEN NAV OVERLAY (FS) 495 Opened by the base topnav hamburger (#navToggle) on ALL viewports. 496 BUILD WAVE 2026-07-29 (BW-NAV-IA): C1-C "Horizon" desktop + C1-B 497 "Reading Order" mobile. Global panel regrouped per the ADOPTED IA: 498 three standing programs (WPM promoted out of "projects") + five 499 "Projects on the ground" place pages -- every place-name clicks 500 through to its own page, no dead-ends at global.html. 501 This block is baked IDENTICALLY on every production page and is 502 the source of truth (library/sections/nav-fullscreen-v2.html 503 mirrors it for preview only). 504 ============================================================ --> 505<div class="nav2" id="fsMenu" role="dialog" aria-modal="true" aria-label="Site menu" aria-hidden="true" tabindex="-1"> 506 507 <!-- sliver-proof solid navy floor (behind the wave) --> 508 <div class="nav2_solid" aria-hidden="true"></div> 509 510 <!-- the wave reveal (kept from the old mmenu) --> 511 <div class="nav2_wave" aria-hidden="true"> 512 <svg class="nav2_wave-svg" viewBox="0 0 1000 1000" preserveAspectRatio="none"> 513 <defs> 514 <linearGradient id="fsWaveFill" x1="0" y1="0" x2="0" y2="1"> 515 <stop offset="0" stop-color="#16335c"></stop> 516 <stop offset="0.5" stop-color="#11244a"></stop> 517 <stop offset="1" stop-color="#0c1426"></stop> 518 </linearGradient> 519 </defs> 520 <path class="nav2_wave-path" id="fsWavePath" d="M0 2S175 1 500 1s500 1 500 1V0H0Z"></path> 521 </svg> 522 </div> 523 524 <div class="nav2_grid"> 525 526 <!-- IN-MENU SEARCH (locked): opens the sitewide search overlay (fm-search.js, z-2000) --> 527 <button class="nav2_search" type="button" aria-label="Search the site"> 528 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg> 529 <span class="nav2_search-t">Search the site</span> 530 </button> 531 532 <!-- THE LINE (desktop horizon) / ACCORDION (mobile) --> 533 <nav class="nav2_list" aria-label="Primary"> 534 535 <!-- ABOUT --> 536 <div class="nav2_group"> 537 <div class="nav2_head"> 538 <a class="nav2_item" href="/about" data-panel="about" style="--c:var(--sky)">About</a> 539 <button class="nav2_caret" type="button" data-panel="about" aria-controls="fsPanel-about" aria-expanded="false" aria-label="Expand About sub-pages"> 540 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> 541 </button> 542 </div> 543 <div class="nav2_panel nav2_about" id="fsPanel-about" data-panelbody="about" style="--pc:var(--sky)"> 544 <a class="nav2_over" href="/about"><span class="nav2_over-go">Go to About</span><span class="nav2_over-ov">About overview</span></a> 545 <div class="nav2_subrow"> 546 <a class="nav2_sub" href="/our-team">Our Team</a> 547 <a class="nav2_sub" href="/our-team#board">Our Board</a> 548 <a class="nav2_sub" href="/sources-of-support">Sources of Support</a> 549 </div> 550 </div> 551 </div> 552 553 <!-- PROGRAMS (locked pillars: Learn / Earn / Eat / Heal, in that order) --> 554 <div class="nav2_group"> 555 <div class="nav2_head"> 556 <a class="nav2_item" href="/programs" data-panel="programs" style="--c:var(--purple)">Programs</a> 557 <button class="nav2_caret" type="button" data-panel="programs" aria-controls="fsPanel-programs" aria-expanded="false" aria-label="Expand Programs sub-pages"> 558 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> 559 </button> 560 </div> 561 <div class="nav2_panel nav2_programs" id="fsPanel-programs" data-panelbody="programs" style="--pc:var(--purple)"> 562 <a class="nav2_over" href="/programs"><span class="nav2_over-go">Go to Programs</span><span class="nav2_over-ov">Programs overview</span></a> 563 <div class="nav2_bkts"> 564 <div class="nav2_bkt" style="--bc:var(--purple)"> 565 <p class="nav2_bktlabel">Learn</p> 566 <a class="nav2_bktlink" href="/freshfutures">FreshFutures</a> 567 <a class="nav2_bktlink" href="/freshpath">FreshPath</a> 568 <a class="nav2_bktlink" href="/freshfoundations">FreshFoundations</a> 569 </div> 570 <div class="nav2_bkt" style="--bc:var(--earnb)"> 571 <p class="nav2_bktlabel">Earn</p> 572 <a class="nav2_bktlink" href="/lifepoint-career-institute">
572LifePoint Career Institute</a> 573 <a class="nav2_bktlink" href="/beaver-street-enterprise-center">Beaver Street Enterprise Center</a> 574 </div> 575 <div class="nav2_bkt" style="--bc:var(--teal)"> 576 <p class="nav2_bktlabel">Eat</p> 577 <a class="nav2_bktlink" href="/nativefresh">NativeFresh Aquaponics</a> 578 <a class="nav2_bktmore" href="/global">See the global work</a> 579 </div> 580 <div class="nav2_bkt" style="--bc:var(--sky)"> 581 <p class="nav2_bktlabel">Heal</p> 582 <a class="nav2_bktlink" href="/outpatient-counseling">Outpatient Counseling</a> 583 <a class="nav2_bktlink" href="/freshfamilies">FreshFamilies</a> 584 </div> 585 </div> 586 </div> 587 </div> 588 589 <!-- GLOBAL (ADOPTED IA 2026-07-29: programs first, then the ground) --> 590 <div class="nav2_group"> 591 <div class="nav2_head"> 592 <a class="nav2_item" href="/global" data-panel="global" style="--c:var(--teal)">Global</a> 593 <button class="nav2_caret" type="button" data-panel="global" aria-controls="fsPanel-global" aria-expanded="false" aria-label="Expand Global sub-pages"> 594 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> 595 </button> 596 </div> 597 <div class="nav2_panel nav2_global" id="fsPanel-global" data-panelbody="global" style="--pc:var(--teal)"> 598 <a class="nav2_over" href="/global"><span class="nav2_over-go">Go to Global</span><span class="nav2_over-ov">Global overview</span></a> 599 <div class="nav2_subrow"> 600 <a class="nav2_sub" href="/aquaponics">Global Aquaponics</a> 601 <a class="nav2_sub" href="/desmond-tutu">The Desmond Tutu Programme</a> 602 <a class="nav2_sub" href="/worldwide-pilgrimage-ministries">Worldwide Pilgrimage Ministries</a> 603 </div> 604 <p class="nav2_mini">Projects on the ground</p> 605 <div class="nav2_subrow nav2_subrow-sm"> 606 <a class="nav2_sub nav2_sub-sm" href="/jubilee-housing-washington-dc">Washington, D.C. | Jubilee Housing</a> 607 <a class="nav2_sub nav2_sub-sm" href="/island-fresh-st-croix">St. Croix, USVI | Island Fresh</a> 608 <a class="nav2_sub nav2_sub-sm" href="/soweto-tutu-home">Soweto | The Tutu Home</a> 609 <a class="nav2_sub nav2_sub-sm" href="/mpumalanga">Mpumalanga | Acornhoek + Shalati</a> 610 <a class="nav2_sub nav2_sub-sm" href="/randburg-training-facility-johannesburg-south-africa">Randburg | Training Facility</a> 611 </div> 612 </div> 613 </div> 614 615 <!-- NEWS (label -> news.html; desktop pane = latest 3; no mobile accordion, per C1-B) --> 616 <div class="nav2_group"> 617 <div class="nav2_head"> 618 <a class="nav2_item" href="/news" data-panel="news" style="--c:var(--orange)">News</a> 619 </div> 620 <div class="nav2_panel nav2_news" id="fsPanel-news" data-panelbody="news" style="--pc:var(--orange)"> 621 <!-- LATEST 3 ARTICLES -- fm-cms.js (initNavNews) replaces these rows on first 622 nav open, reusing the shared 'page:0' cache key (zero extra requests for 623 most visitors). The three rows below are the FALLBACK, deliberately kept: 624 if Sanity is unreachable or JS never runs, the menu still shows three real 625 stories instead of an empty pane. Refresh them if they go badly stale. --> 626 <div class="nav2_rows nav2_newslist" data-cms="nav-news" data-cms-limit="3"> 627 <a class="nav2_row" href="/news/desmond-tutu-programme-expands-soweto/"><span class="nav2_rowname">Desmond Tutu Hunger Programme Expands in Soweto</span><span class="nav2_rowdesc">Faith leaders and Rotary International gathered at Archbishop Tutu's Soweto home to mark the programme's expansion.</span></a> 628 <a class="nav2_row" href="/news/joannie-newton-freshministries-tribute/"><span class="nav2_rowname">Rest In Peace Joannie Newton</span><span class="nav2_rowdesc">A longtime FreshMinistries board member and benefactor, and our honorary cheer person for many years, has died.</span></a> 629 <a class="nav2_row" href="/news/freshministries-top-nonprofit-springfield-2025/"><span class="nav2_rowname">FreshMinistries Named Top 3 Non-Profit in Springfield for 2025</span><span class="nav2_rowdesc">BusinessRate named FreshMinistries a Top 3 non-profit of 2025, based entirely on verified Google reviews.</span></a> 630 </div> 631 <a class="nav2_over" href="/news"><span class="nav2_over-go">Read all news</span><span class="nav2_over-ov">All news</span></a> 632 </div> 633 </div> 634 635 <!-- GET INVOLVED (Give also lives here) --> 636 <div class="nav2_group"> 637 <div class="nav2_head"> 638 <a class="nav2_item" href="/get-involved" data-panel="getinvolved" style="--c:var(--red)">Get Involved</a> 639 <button class="nav2_caret" type="button" data-panel="getinvolved" aria-controls="fsPanel-getinvolved" aria-expanded="false" aria-label="Expand Get Involved sub-pages"> 640 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> 641 </button> 642 </div> 643 <div class="nav2_panel nav2_getinvolved" id="fsPanel-getinvolved" data-panelbody="getinvolved" style="--pc:var(--red)"> 644 <a class="nav2_over" href="/get-involved"><span class="nav2_over-go">Go to Get Involved</span><span class="nav2_over-ov">Get Involved overview</span></a> 645 <div class="nav2_subrow"> 646 <a class="nav2_sub" href="/volunteer">Volunteer</a> 647 <a class="nav2_sub" href="/give">Give</a> 648 <a class="nav2_sub" href="/contact">Contact</a> 649 </div> 650 </div> 651 </div> 652 653 <!-- FOLLOW (no page; reveals socials; label toggles on mobile) --> 654 <div class="nav2_group nav2_group-follow"> 655 <div class="nav2_head"> 656 <button class="nav2_item nav2_item-follow" type="button" data-panel="follow" style="--c:var(--sky)" aria-controls="fsPanel-follow" aria-expanded="false">Follow</button> 657 <button class="nav2_caret" type="button" data-panel="follow" aria-controls="fsPanel-follow" aria-expanded="false" aria-label="Expand social links"> 658 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> 659 </button> 660 </div> 661 <div class="nav2_panel nav2_follow" id="fsPanel-follow" data-panelbody="follow" style="--pc:var(--sky)"> 662 <div class="nav2_soc" aria-label="FreshMinistries on social media"> 663 <a class="nav2_social-row" href="https://www.facebook.com/FreshMinistries/" target="_blank" rel="noopener">
664 <span class="nav2_social-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 21v-8h2.69l.4-3.12h-3.09V7.89c0-.9.25-1.52 1.55-1.52h1.65V3.57c-.29-.04-1.27-.13-2.41-.13-2.39 0-4.03 1.46-4.03 4.14v2.3H7.56V13h2.7v8h3.24z"/></svg></span><span class="nav2_social-name">Facebook</span> 665 </a> 666 <a class="nav2_social-row" href="https://www.instagram.com/freshministries/" target="_blank" rel="noopener"> 667 <span class="nav2_social-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.4" cy="6.6" r="1.15" fill="currentColor" stroke="none"/></svg></span><span class="nav2_social-name">Instagram</span> 668 </a> 669 <a class="nav2_social-row" href="https://www.youtube.com/channel/UCqlwglTByp-dF7UKQKvtSyw" target="_blank" rel="noopener"> 670 <span class="nav2_social-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.5 7.2c-.25-1-1-1.75-1.98-2.02C18.72 4.7 12 4.7 12 4.7s-6.72 0-8.52.48c-.98.27-1.73 1.02-1.98 2.02C1 9.02 1 12 1 12s0 2.98.5 4.8c.25 1 1 1.75 1.98 2.02C5.28 19.3 12 19.3 12 19.3s6.72 0 8.52-.48c.98-.27 1.73-1.02 1.98-2.02.5-1.82.5-4.8.5-4.8s0-2.98-.5-4.8zM9.75 15.5v-7l6 3.5-6 3.5z"/></svg></span><span class="nav2_social-name">YouTube</span> 671 </a> 672 <a class="nav2_social-row" href="https://www.linkedin.com/company/fresh-ministries-inc/" target="_blank" rel="noopener"> 673 <span class="nav2_social-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.94 5.5A1.94 1.94 0 1 1 3.06 5.5a1.94 1.94 0 0 1 3.88 0zM3.4 8.65h3.1V21H3.4V8.65zm5.72 0h2.97v1.69h.04c.41-.78 1.42-1.6 2.93-1.6 3.13 0 3.71 2.06 3.71 4.74V21h-3.1v-5.47c0-1.3-.02-2.98-1.81-2.98-1.82 0-2.1 1.42-2.1 2.88V21H9.12V8.65z"/></svg></span><span class="nav2_social-name">LinkedIn</span> 674 </a> 675 </div> 676 </div> 677 </div> 678 679 <!-- GIVE (own page; orange; hovering it rests the runner + default pane) --> 680 <div class="nav2_group nav2_group-give"> 681 <div class="nav2_head"> 682 <a class="nav2_item nav2_item-give" href="/give" data-panel="default" style="--c:var(--orange)">Give</a> 683 </div> 684 </div> 685 686 <!-- the 7-color runner (desktop only; JS glides it under the active item) -->
687 <span class="nav2_runner" id="fsRunner" aria-hidden="true"></span> 688 689 <!-- DEFAULT / resting pane (desktop only; hidden on mobile) --> 690 <div class="nav2_panel nav2_default is-active" data-panelbody="default" style="--pc:var(--sky)"> 691 <p class="nav2_quiet">From Jacksonville to the world. Hover a section.</p> 692 </div> 693 694 </nav> 695 </div><!-- /nav2_grid --> 696</div><!-- /nav2 --> 697<!-- /FM-NAV-FS:MARKUP --> 698 699<!-- overlay wave menu. Volunteer + Contact added after Get Involved (this design has ONE nav-link 700 list, shared by desktop + mobile via the always-visible hamburger); Contact = current page. --> 701 702 703<!-- ============================================================ 704 SECTION 1 -- HERO (LIGHT, split-text sweep) #top 705 Weaver dhero chrome (colorbar-only kick, .dhero_title SKY sweep, 706 SplitText entrance + FOUC guard), CENTERED on the canonical grid 707 (.section_grid > .dhero_inner.u-cols-1-8) -- mirrors the 708 volunteer.html light hero: colorbar kicker, H1, short intro, one 709 primary CTA. Primary CTA is a real tel: action (never an on-page 710 anchor to the form below -- MASTER-RULES 3.4). Bg resolves to 711 #ebf1f7 so the image band + form open on the same color (no cut). 712 ============================================================ --> 713<style> 714.dhero{position:relative;text-align:center;overflow:hidden;color:var(--text-strong); 715 background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 50%,#ebf1f7 100%); 716 padding:clamp(8rem,18vh,11.5rem) 0 clamp(3.5rem,8vh,5.5rem)} 717/* GRID: the hero content now rides the canonical .section_grid (u-cols-1-8) so the fm-editor 718 Grid tool can select it; the grid's --g-side rails + column span own the width. */ 719.dhero_inner{position:relative;z-index:2} 720/* eyebrow/kicker TEXT is dead sitewide -- the colorbar rides ALONE, centered above the H1 */ 721.dhero_kick{display:flex;align-items:center;justify-content:center;margin-bottom:1.375rem} 722.dhero_title{font-family:var(--display);font-weight:400;font-size:clamp(2.75rem,6vw,4.75rem);line-height:1.04; 723 letter-spacing:.004em;color:var(--text-strong);margin:0 auto 1.5rem} 724/* PLACE SWEEP (white-hero) -- the FM SKY clipped into the text, DEEPENED so it holds on the 725 white field. The entrance JS applies this per split character and reconstitutes ONE 726 continuous sweep. Fallback = solid brand sky where background-clip:text is unsupported. */ 727.dhero_sweep{color:var(--sky)} 728@supports ((-webkit-background-clip:text) or (background-clip:text)){ 729 .dhero_sweep{ 730 background:linear-gradient(90deg,#12557d 0%,#1f7cad 50%,#0b9bcf 100%); 731 -webkit-background-clip:text;background-clip:text; 732 -webkit-text-fill-color:transparent;color:transparent; 733 background-repeat:no-repeat; 734 } 735} 736.dhero_sub{font-family:var(--body);font-weight:400;font-size:clamp(1.0625rem,1.4vw,1.3125rem);line-height:1.65; 737 color:var(--text-body);max-width:54ch;margin:0 auto} 738.dhero_cta{display:flex;gap:1.375rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:2.375rem} 739/* primary flips INVERSE on the light field: blue-ink fill, white text; hover deepens */ 740.dhero_btn{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--body);font-weight:600;font-size:.9375rem; 741 padding:.9375rem 1.875rem;border-radius:999px;border:none;cursor:pointer;text-decoration:none; 742 background:var(--blue-ink);color:#fff;box-shadow:0 16px 34px -18px rgba(20,38,74,.55); 743 transition:transform .2s,box-shadow .25s,background .25s,color .25s} 744.dhero_btn:hover{transform:translateY(-.125rem);background:#0c1426} 745.dhero_btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px} 746.dhero_btn-ico{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.8125rem;transition:transform .25s} 747.dhero_btn:hover .dhero_btn-ico{transform:translateX(.1875rem)} 748@media(max-width:479px){ 749 .dhero_cta{flex-direction:column;align-items:center} 750} 751</style> 752<header class="dhero" id="top"> 753 <div class="section_grid"> 754 <div class="dhero_inner u-cols-1-8"> 755 <div class="dhero_kick">
756 <span class="colorbar" aria-hidden="true"><i class="colorbar_i colorbar_a"></i><i class="colorbar_i colorbar_b"></i><i class="colorbar_i colorbar_c"></i><i class="colorbar_i colorbar_d"></i><i class="colorbar_i colorbar_e"></i><i class="colorbar_i colorbar_f"></i><i class="colorbar_i colorbar_g"></i></span> 757 </div> 758 <h1 class="dhero_title">Get in touch.</h1> 759 <p class="dhero_sub">Questions, ideas, a room full of people who want to help. Whatever brings you here, call us and a real person picks up.</p> 760 <div class="dhero_cta"> 761 <a class="dhero_btn" href="tel:9043550000">Call 904-355-0000 <span class="dhero_btn-ico">→</span></a> 762 </div> 763 </div> 764 </div> 765</header> 766 767<!-- ============================================================ 768 SECTION 1.5 -- FULL-WIDTH IMAGE BAND (mbreak, scroll-zoom) 769 Library media-break, volunteer.html pattern (Pete ask): an 770 IN-COLUMN full-width image band on the canonical grid 771 (.section_grid > .mbreak_frame.u-cols-1-8) so the fm-editor Grid 772 tool can select it. The frame stays fixed (overflow hidden, 773 fm-system radius) while the media scrub-zooms 1.12 -> 1 inside it 774 (mbreak-zoom). SEAM (MASTER-RULES 1.0): the band ground is 775 #ebf1f7 -- it opens on the hero's end color and hands the same 776 color to the form section below, so both seams stay flush (no 777 cut). SPACING: flush -- no .section class, so the band rides 778 between the hero's bottom padding and the form's top padding.
779 Photo comes LAST: gradient phlab placeholder (blue -> sky -> 780 teal, the page palette) with the house data-label/data-img slot; 781 PETE picks the real wide photo via the picker. Scrub rides the 782 shared GSAP CDN at the bottom of <body>; no-JS and reduced-motion 783 render static. 784 ============================================================ --> 785<style> 786.mbreak{position:relative;background:#ebf1f7} 787.mbreak_frame{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius); 788 height:clamp(18rem,52vh,32rem);background:var(--blue-ink)} 789.mbreak_media{position:absolute;top:0;left:0;right:0;bottom:0;will-change:transform;transform-origin:50% 45%; 790 background:radial-gradient(36rem 22rem at 70% 24%,rgba(0,154,206,.28),transparent 60%), 791 radial-gradient(44rem 28rem at 20% 78%,rgba(0,162,135,.30),transparent 62%), 792 linear-gradient(120deg,var(--blue) 0%,var(--sky) 55%,var(--teal) 100%)} 793@media(max-width:991px){ .mbreak_frame{height:clamp(16rem,48vh,28rem)} } 794@media(max-width:767px){ .mbreak_frame{height:clamp(13rem,42vh,22rem)} } 795@media(max-width:479px){ .mbreak_frame{height:clamp(11rem,38vh,19rem);border-radius:var(--radius-sm)} } 796@media(prefers-reduced-motion:reduce){ .mbreak_media{will-change:auto} } 797</style> 798<section class="mbreak mbreak-zoom" aria-label="FreshMinistries in Jacksonville"> 799 <div class="section_grid"> 800 <div class="mbreak_frame u-cols-1-8"> 801 <!-- photo slot: swap this gradient div for the real wide image (keep the class for the scrub) --> 802 <div class="mbreak_media phlab has-img" data-label="Contact Fresh Ministries" data-img="contact-break-01"><img class="ph_img" src="/img/contact/contact-break-01.jpg" alt="The Beaver Street Enterprise Center in Jacksonville." loading="lazy" decoding="async" draggable="false"></div> 803 </div> 804 </div> 805</section> 806 807<!-- ============================================================ 808 SECTION 2 -- CONTACT FORM #contact 809 C6-A layout (Pete's pick, PICKS-BUILD-2026-07-29), extracted 810 from pages/_kit-c68-misc.html (c6a_*): centered heading, the 811 form card on its own centered column (nothing beside it), and 812 the warm context moved BENEATH the form as its own moment -- 813 centered subhead, photo + quote grid, three fact tiles. The 814 old two-column form+aside grid is gone. 815 FORM WIRING UNTOUCHED (PM-793 routing still open): same 816 #contactForm id, field names, topic chips, shipped-disabled 817 state + notice. fm-forms.js activates at runtime and finds 818 .form_notice via the form's PARENT element, so the notice 819 stays a SIBLING of the form inside .cform_mid. 820 Bg opens #ebf1f7 (the hero's end color) and fades to white -- 821 smooth seam, no cut. Section padding = var(--section-y) via 822 .section (MASTER-RULES 2.5). 823 ============================================================ --> 824<style> 825.cform{background:linear-gradient(180deg,#ebf1f7 0%,#f4f9ff 45%,#ffffff 100%)} 826/* C6-A: ONE centered column inside the u-cols-2-7 child (canonical rails). The head/mid/ 827 help max-widths below are the kit's c6a_head / c6a_mid / c6a_help values verbatim; the 828 old 1.15fr/.85fr form+aside grid is gone -- nothing sits beside the form. */ 829.cform_inner{position:relative} 830 831/* centered heading (kit .c6a_head) */ 832.form_head{text-align:center;max-width:44rem;margin:0 auto 1.5rem} 833.form_bar{margin:0 auto 1.375rem} 834.form_title{font-family:var(--display);font-weight:400;font-size:clamp(1.875rem,3.2vw,2.875rem);line-height:1.08;color:var(--blue-ink);letter-spacing:-.01em;margin:0 0 1rem} 835.form_intro{font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--text-muted);max-width:52ch;margin:0 auto} 836 837/* the form column (kit .c6a_mid) -- notice + card ride together; fm-forms.js looks the 838 notice up in the form's parent, so BOTH must stay direct children of .cform_mid */ 839.cform_mid{max-width:46rem;margin:0 auto} 840.form_card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:clamp(1.5rem,3vw,2.5rem)} 841.form_group{margin-bottom:1.875rem} 842.form_group-last{margin-bottom:0} 843.form_glabel{font-family:'Space Mono',monospace;font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin:0 0 1.125rem;display:block} 844.form_row{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem} 845.form_row-full{grid-template-columns:1fr} 846.form_row-last{margin-bottom:0}
847.form_field{display:flex;flex-direction:column;gap:.4375rem} 848.form_label{font-family:var(--body);font-size:.8125rem;font-weight:600;color:var(--text-strong)} 849.form_input{font-family:var(--body);font-size:1rem;color:var(--text-strong);background:var(--cloud);border:1px solid var(--line);border-radius:.625rem; 850 padding:.8125rem 1rem;width:100%;transition:border-color .2s,background .2s,box-shadow .2s} 851.form_input::placeholder{color:var(--mist)} 852.form_input:focus{outline:none;border-color:var(--sky);background:#fff;box-shadow:0 0 0 3px rgba(0,154,206,.16)} 853.form_textarea{min-height:7rem;resize:vertical;line-height:1.55} 854 855/* brand-colored topic CHIPS -- checkbox state mirrored to .is-on via JS (class-only styling) */ 856.form_chips{display:flex;flex-wrap:wrap;gap:.625rem} 857.form_chip{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem .625rem .875rem;border-radius:999px; 858 border:1.5px solid var(--line);background:#fff;color:var(--text-body);font-family:var(--body);font-size:.875rem;font-weight:500; 859 cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s;--c:var(--blue)} 860.form_chip::before{content:"";width:.6875rem;height:.6875rem;border-radius:50%;background:var(--c);flex:0 0 auto;transition:background .2s,box-shadow .2s} 861.form_chip:hover{border-color:var(--c);transform:translateY(-1px)} 862.form_chip:focus-within{outline:2px solid var(--c);outline-offset:2px} 863.form_chip.is-on{background:var(--c);border-color:var(--c);color:#fff} 864.form_chip.is-on::before{background:#fff} 865.form_chip-a{--c:var(--blue)} 866.form_chip-b{--c:var(--sky)} 867.form_chip-c{--c:var(--teal)} 868.form_chip-d{--c:var(--orange)} 869.form_chip-e{--c:var(--red)} 870.form_chip-f{--c:var(--purple)} 871.form_check{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} 872.form_submit{margin-top:1.875rem} 873.form_note{font-family:var(--body);font-size:.8125rem;color:var(--text-faint);margin:1rem 0 0} 874 875/* BENEATH -- the warm context (kit .c6a_help): centered subhead, photo + quote grid, 876 three fact tiles. Replaces the old right-hand .form_aside card. */ 877.cform_help{max-width:62rem;margin:3.25rem auto 0} 878.cform_helphead{text-align:center;margin-bottom:1.75rem} 879.cform_helphead .colorbar{margin-inline:auto} 880.cform_helph{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12;color:var(--text-strong);margin:.75rem 0 0} 881.cform_helpgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center} 882/* photo slot -- gradient phlab placeholder (page palette), Pete picks the real photo via ?edit=1 */ 883.cform_ph{width:100%;aspect-ratio:16/10;border-radius:var(--radius-sm); 884 background:linear-gradient(135deg,var(--blue),var(--sky) 55%,var(--teal))} 885.form_quote{font-family:var(--quote);font-style:italic;font-weight:400;font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.3;color:var(--blue-ink);margin:0 0 1rem;max-width:24ch} 886.cform_help-p{font-family:var(--body);font-size:1rem;line-height:1.62;color:var(--text-muted);margin:0} 887.cform_tel{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(41,80,153,.35);transition:color .2s,border-color .2s} 888.cform_tel:hover{color:var(--sky);border-color:currentColor} 889.cform_tel:focus-visible{outline:2px solid var(--blue);outline-offset:2px} 890.cform_tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.75rem} 891.cform_tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.25rem;font-family:var(--body);font-size:.875rem;line-height:1.5;color:var(--text-body)} 892 893@media(max-width:767px){ 894 .form_row{grid-template-columns:1fr} 895 .cform_helpgrid,.cform_tiles{grid-template-columns:1fr} 896} 897</style> 898<section class="section cform" id="contact" aria-label="Contact form"> 899 <div class="section_grid"> 900 <div class="cform_inner u-cols-2-7"> 901 <!-- C6-A: centered heading --> 902 <div class="form_head"> 903 <span class="colorbar form_bar" aria-hidden="true"><i class="colorbar_i colorbar_a"></i><i class="colorbar_i colorbar_b"></i><i class="colorbar_i colorbar_c"></i><i class="colorbar_i colorbar_d"></i><i class="colorbar_i colorbar_e"></i><i class="colorbar_i colorbar_f"></i><i class="colorbar_i colorbar_g"></i></span> 904 <h2 class="form_title">Send us a message</h2> 905 <p class="form_intro">Tell us what you need and the best way to reach you back.</p> 906 </div> 907 <!-- C6-A: the form on its own centered column -- nothing sits beside it --> 908 <div class="cform_mid"> 909 <!-- ============================================================================ 910 FLAG -- CONTACT FORM IS DISABLED ON PURPOSE (2026-07-14). 911 It previously had NO action and a JS e.preventDefault(): a program head could fill it 912 out, hit Send, and their message was silently discarded. That is
912worse than no form. 913 No form backend is chosen yet (MASTER-RULES OPEN #3), and there is NO verified general 914 FreshMinistries contact email in any source we hold (only rlee@ -- the founder's own -- 915 and bsec@ -- the Beaver Street centre). We will not invent an address, so no mailto: 916 was wired either. 917 The form is therefore DISABLED, with a visible notice routing people to the VERIFIED 918 phone (904-355-0000) and the VERIFIED HQ address. Nothing can be typed and lost. 919 TO RE-ENABLE: pick the provider, set the form action, delete the .form_notice block, 920 and remove the `disabled` attribute from <fieldset class="form_fs"> and the button. 921 ============================================================================ --> 922 <div class="form_notice" role="status"> 923 <p class="form_notice-h">This form is not switched on yet.</p> 924 <p class="form_notice-p">We are still setting up where these messages land, and we would rather tell you that than take your words and lose them. Call <a class="form_notice-a" href="tel:9043550000">904-355-0000</a> and a person will answer, or come by 1131 N Laura St, Jacksonville.</p> 925 </div> 926 <form class="form_card" id="contactForm" novalidate> 927 <fieldset class="form_fs" disabled> 928 <div class="form_group"> 929 <span class="form_glabel">Your details</span> 930 <div class="form_row"> 931 <label class="form_field"> 932 <span class="form_label">First name</span> 933 <input class="form_input" type="text" name="first_name" autocomplete="given-name" placeholder="Jane" required> 934 </label> 935 <label class="form_field"> 936 <span class="form_label">Last name</span> 937 <input class="form_input" type="text" name="last_name" autocomplete="family-name" placeholder="Doe" required> 938 </label> 939 </div> 940 <div class="form_row form_row-last"> 941 <label class="form_field"> 942 <span class="form_label">Email</span> 943 <input class="form_input" type="email" name="email" autocomplete="email" placeholder="[email protected]" required> 944 </label> 945 <label class="form_field"> 946 <span class="form_label">Phone (optional)</span> 947 <input class="form_input" type="tel" name="phone" autocomplete="tel" placeholder="(904) 555-0123"> 948 </label> 949 </div> 950 </div> 951 952 <div class="form_group"> 953 <span class="form_glabel">What is this about? Pick at least one</span> 954 <div class="form_chips" role="group" aria-label="Reason for contact"> 955 <label class="form_chip form_chip-a"><input class="form_check" type="checkbox" name="topic" value="General question">General question</label> 956 <label class="form_chip form_chip-b"><input class="form_check" type="checkbox" name="topic" value="Volunteering">Volunteering</label> 957 <label class="form_chip form_chip-c"><input class="form_check" type="checkbox" name="topic" value="Giving">Giving</label> 958 <label class="form_chip form_chip-d"><input class="form_check" type="checkbox" name="topic" value="Programs">Programs</label> 959 <label class="form_chip form_chip-e"><input class="form_check" type="checkbox" name="topic" value="Partnership">Partnership</label> 960 <label class="form_chip form_chip-f"><input class="form_check" type="checkbox" name="topic" value="Press or media">Press or media</label> 961 </div> 962 </div> 963 964 <div class="form_group form_group-last"> 965 <span class="form_glabel">Message</span> 966 <label class="form_field"> 967 <span class="form_label">How can we help?</span> 968 <textarea class="form_input form_textarea" name="message" placeholder="Tell us what you need, and we will point it to the right person." required></textarea> 969 </label> 970 </div> 971 972 </fieldset> 973 <button class="btn btn-solid form_submit" type="submit" disabled>Send message</button> 974 <p class="form_note">When this is switched on we will only use your info to reply. No lists, no resale.</p> 975 </form> 976 </div> 977 978 <!-- C6-A: the warm context BENEATH the form (was the right-hand aside; same words) --> 979 <div class="cform_help reveal"> 980 <div class="cform_helphead">
981 <span class="colorbar colorbar-sm" aria-hidden="true"><i class="colorbar_i colorbar_a"></i><i class="colorbar_i colorbar_b"></i><i class="colorbar_i colorbar_c"></i><i class="colorbar_i colorbar_d"></i><i class="colorbar_i colorbar_e"></i><i class="colorbar_i colorbar_f"></i><i class="colorbar_i colorbar_g"></i></span> 982 <h3 class="cform_helph">What to expect</h3> 983 </div> 984 <div class="cform_helpgrid"> 985 <!-- photo slot: gradient placeholder, Pete swaps the real photo LAST via the picker --> 986 <div class="cform_ph phlab" data-img="contact-help-01"></div> 987 <div> 988 <p class="form_quote">Call us and you reach the people doing the work.</p> 989 <p class="cform_help-p">We are a small team in Jacksonville. The phone rings on a desk in this building, not in a call center three states away.</p> 990 </div> 991 </div> 992 <div class="cform_tiles"> 993 <div class="cform_tile">We reply within a couple of business days.</div> 994 <div class="cform_tile">Prefer the phone? Call headquarters at <a class="cform_tel" href="tel:9043550000"><span style="white-space:nowrap">904-355-0000</span></a>.</div> 995 <div class="cform_tile">Want to come by? Our doors and hours are just below.</div> 996 </div> 997 </div> 998 </div> 999 </div> 1000</section> 1001 1002<!-- ============================================================ 1003 SECTION 3 -- LOCATIONS (loc_*) 1004 The verified location block from get-involved.html (addresses + 1005 phones sourced there VERBATIM from pages/contact.md): 4 1006 Jacksonville doors as 2-column cards on the 8-col band, then the 1007 International country list beneath a divider. Flush white top 1008 (matches the form's white bottom) and white bottom (hands off to 1009 the give band). Section padding = var(--section-y) via .section 1010 (MASTER-RULES 2.5; the get-involved static clamp swapped out). 1011 ============================================================ --> 1012<style> 1013.loc{background:#ffffff} 1014/* on the canonical .section_grid (8-col band); each location card = 2 columns. .gi-rows adds 1015 the row-gap the base .section_grid omits (it only sets column-gap). */ 1016.gi-rows{row-gap:1.75rem} 1017.loc_head{margin:0} 1018.loc_bar{margin:0 0 1.375rem} 1019.loc_title{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:1.08;color:var(--blue-ink);letter-spacing:-.01em;margin:0 0 1rem;max-width:18ch} 1020.loc_intro{font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--text-muted);max-width:54ch;margin:0 0 2.75rem} 1021.loc_cell{grid-column:span 2} 1022.loc_card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); 1023 overflow:hidden;padding:1.75rem 1.5rem 1.625rem;box-shadow:var(--shadow-sm);--c:var(--blue)} 1024.loc_card::before{content:"";position:absolute;left:0;top:0;height:.3125rem;width:100%;background:var(--c)} 1025.loc_card-a{--c:var(--blue)} 1026.loc_card-b{--c:var(--teal)} 1027.loc_card-c{--c:var(--orange)} 1028.loc_card-d{--c:var(--purple)} 1029.loc_name{font-family:var(--display);font-weight:400;font-size:1.1875rem;line-height:1.2;color:var(--blue-ink);margin:.375rem 0 .625rem} 1030.loc_addr{font-family:var(--body);font-size:.9rem;line-height:1.55;color:var(--text-muted)} 1031.loc_tel{display:inline-flex;align-items:center;gap:.4rem;margin-top:.875rem;font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--blue);text-decoration:none;transition:color .2s,gap .2s} 1032.loc_tel:hover{color:var(--sky);gap:.6rem} 1033.loc_tel:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:.25rem} 1034.loc_tel-ico{width:.9375rem;height:.9375rem;display:block} 1035.loc_intl{margin-top:2.75rem;border-top:1px solid var(--line);padding-top:2rem} 1036.loc_intl-h{font-family:'Space Mono',monospace;font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin:0 0 1.125rem} 1037.loc_intl-row{display:flex;flex-wrap:wrap;gap:.625rem} 1038/* USVI is stated here as completed work, not a current location (see the markup note) */ 1039.loc_intl-note{margin:1.125rem 0 0;max-width:52rem;color:var(--text-muted)} 1040.loc_pill{display:inline-flex;align-items:center;padding:.5rem 1.125rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-family:var(--body);font-size:.875rem;color:var(--text-body)} 1041@media(max-width:991px){ 1042 .loc_cell{grid-column:span 4} 1043} 1044@media(max-width:767px){ 1045 .loc_cell{grid-column:1 / -1} 1046} 1047</style> 1048<section class="section loc" aria-label="Where to find us"> 1049 <div class="section_grid gi-rows"> 1050 <div class="u-cols-1-8 loc_head">
1051 <span class="colorbar loc_bar" aria-hidden="true"><i class="colorbar_i colorbar_a"></i><i class="colorbar_i colorbar_b"></i><i class="colorbar_i colorbar_c"></i><i class="colorbar_i colorbar_d"></i><i class="colorbar_i colorbar_e"></i><i class="colorbar_i colorbar_f"></i><i class="colorbar_i colorbar_g"></i></span> 1052 <h2 class="h2 loc_title">Where to find us</h2> 1053 <p class="body loc_intro">Four doors across Jacksonville, and offices around the world. For general questions, call headquarters at <a class="link" href="tel:9043550000">904-355-0000</a>.</p> 1054 </div> 1055 <div class="loc_card loc_cell loc_card-a reveal"> 1056 <h3 class="loc_name">Headquarters</h3> 1057 <p class="body-sm loc_addr">1131 N. Laura Street<br>Jacksonville, FL 32202</p> 1058 <a class="loc_tel" href="tel:9043550000"><svg class="loc_tel-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"></path></svg>904-355-0000</a> 1059 </div> 1060 <div class="loc_card loc_cell loc_card-b reveal"> 1061 <h3 class="loc_name">Beaver Street Enterprise Center</h3> 1062 <p class="body-sm loc_addr">1225 W. Beaver Street<br>Jacksonville, FL 32204</p> 1063 <a class="loc_tel" href="tel:9042654700"><svg class="loc_tel-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"></path></svg>904-265-4700</a> 1064 </div> 1065 <div class="loc_card loc_cell loc_card-c reveal"> 1066 <h3 class="loc_name">Weaver Center for Community Outreach</h3> 1067 <p class="body-sm loc_addr">616 A. Philip Randolph Boulevard<br>Jacksonville, FL 32202</p> 1068 <a class="loc_tel" href="tel:9048546770"><svg class="loc_tel-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"></path></svg>904-854-6770</a> 1069 </div> 1070 <div class="loc_card loc_cell loc_card-d reveal"> 1071 <h3 class="loc_name">NativeFresh Aquaponics</h3> 1072 <p class="body-sm loc_addr">616 A. Philip Randolph Boulevard<br>Jacksonville, FL 32202</p> 1073 <a class="loc_tel" href="tel:9043553004"><svg class="loc_tel-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"></path></svg>904-355-3004</a> 1074 </div> 1075 <div class="u-cols-1-8 loc_intl reveal"> 1076 <h3 class="loc_intl-h">International</h3> 1077 <!-- U.S. VIRGIN ISLANDS PULLED FROM THE PILLS 2026-07-14. This section is headed "Where to 1078 find us", so every pill asserts a CURRENT location. FreshMinistries handed Island Fresh 1079 on St. Croix to the University of the Virgin Islands on 2025-06-03 (FM's own news post), 1080 so you can no longer find FM there. The work is NOT erased -- it is restated below as 1081 completed work, which is the truth. --> 1082 <div class="loc_intl-row"> 1083 <span class="loc_pill">Haiti</span> 1084 <span class="loc_pill">South Africa</span>
1085 <span class="loc_pill">Mozambique</span> 1086 <span class="loc_pill">Namibia</span> 1087 </div> 1088 <p class="caption loc_intl-note">In the U.S. Virgin Islands, FreshMinistries built Island Fresh, a six-greenhouse aquaponics facility on St. Croix, and handed it to the University of the Virgin Islands in 2025.</p> 1089 </div> 1090 </div> 1091</section> 1092 1093<!-- ============================================================ 1094 SECTION 4 -- GIVE CTA (ctafeat_*) id="give" 1095 get-involved.html's give band, VERBATIM -- REPLACES the Weaver 1096 latest-news band per Pete. Headline + copy from the approved 1097 band; ONE Give banner (MASTER-RULES 3.4). Opens flush white 1098 (matches the loc bottom), fades through cloud into #c7e9f4, and 1099 the footer's navy dome bleeds up over that landing (footer 1100 margin-top:-6vh) -- the one signature dome on the page. 1101 ============================================================ --> 1102<style> 1103.ctafeat_band{background:linear-gradient(180deg,#fff 0%,var(--cloud) 30%,#ddebf6 58%,#c7e9f4 82%,#c7e9f4 100%); 1104 margin-bottom:0;padding-bottom:calc(var(--section-y) + 6vh)} 1105.ctafeat{position:relative;border-radius:var(--radius);border:1px solid var(--line); 1106 padding:clamp(2.25rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr; 1107 gap:clamp(2.5rem,5vw,4rem);align-items:center;box-shadow:var(--shadow-sm); 1108 background:radial-gradient(45rem 25rem at 8% -5%,rgba(235,144,62,.12),transparent 60%), 1109 radial-gradient(39rem 26rem at 105% 110%,rgba(0,154,206,.12),transparent 55%),var(--paper)} 1110.ctafeat_bar{margin-bottom:1.25rem} 1111.ctafeat_title{margin:0 0 1rem;max-width:20ch} 1112.ctafeat_copy{margin:0 0 1.75rem;max-width:52ch} 1113.ctafeat_actions{display:flex;gap:1rem;flex-wrap:wrap} 1114.ctafeat_media{position:relative} 1115.ctafeat_ph{min-height:20rem;border-radius:var(--radius); 1116 background:linear-gradient(135deg,var(--blue),var(--sky) 55%,var(--teal))} 1117.ctafeat_card{position:absolute;left:-1.375rem;bottom:1.5rem;background:var(--paper); 1118 border-radius:var(--radius);box-shadow:var(--shadow);padding:1.125rem 1.375rem; 1119 display:flex;flex-direction:column;gap:.625rem} 1120.ctafeat_cardtext{font-family:var(--display);font-size:1.3125rem;line-height:1.1;color:var(--text-strong)} 1121@media(max-width:767px){ 1122 .ctafeat{grid-template-columns:1fr} 1123 .ctafeat_card{left:1rem} 1124} 1125</style> 1126<section class="section ctafeat_band" id="give"> 1127 <div class="section_grid"> 1128 <div class="ctafeat u-cols-1-8"> 1129 <div class="ctafeat_copywrap"> 1130 <div class="colorbar ctafeat_bar" aria-hidden="true"><i class="colorbar_i colorbar_a"></i><i class="colorbar_i colorbar_b"></i><i class="colorbar_i colorbar_c"></i><i class="colorbar_i colorbar_d"></i><i class="colorbar_i colorbar_e"></i><i class="colorbar_i colorbar_f"></i><i class="colorbar_i colorbar_g"></i></div> 1131 <h2 class="h2 ctafeat_title">Every gift lands somewhere real.</h2> 1132 <p class="body ctafeat_copy">It pays a teenager for a summer of real work. It stocks a greenhouse. It puts an adult through job training. Tell us your name and we will tell you exactly where it went.</p> 1133 <div class="ctafeat_actions"> 1134 <a class="btn btn-donate" href="/give">Give Today</a> 1135 </div> 1136 </div> 1137 <div class="ctafeat_media reveal"> 1138 <!-- photo slot: gradient placeholder, Pete swaps real photos LAST via the picker --> 1139 <div class="ctafeat_ph phlab has-img" data-label="Community photo" data-img="contact-cta-01"><img class="ph_img" src="/img/contact/contact-cta-01.jpg" alt="A father holding his two young children at a FreshMinistries community event." loading="lazy" decoding="async" draggable="false"></div> 1140 <div class="ctafeat_card"> 1141 <div class="colorbar colorbar-sm" aria-hidden="true"><i class="colorbar_i colorbar_a"></i><i class="colorbar_i colorbar_b"></i><i class="colorbar_i colorbar_c"></i><i class="colorbar_i colorbar_e"></i><i class="colorbar_i colorbar_g"></i></div> 1142 <div class="ctafeat_cardtext">Powered by people like you.</div> 1143 </div> 1144 </div> 1145 </div> 1146 </div> 1147</section> 1148 1149<!-- ============================================================ 1150 SECTION 5 -- FOOTER (v2) -- about.html verbatim #footer 1151 Markup lifted verbatim from about.html; the navy dome uses the 1152 program-page seam (margin-top:-6vh) so it bleeds up over the 1153 give band's #c7e9f4 landing above. 1154 ============================================================ --> 1155<style> 1156.footer{color:#9fb2cd;font-family:var(--body);line-height:1.5;padding:clamp(6rem,14vh,9.5rem) var(--pad) 6vh;position:relative; 1157 margin-top:-6vh; /* FOOTER-DOME SEAM: the navy dome bleeds up over the flush give band above */ 1158 clip-path:ellipse(150% 100% at 50% 100%); 1159 background:radial-gradient(72% 90% at 12% 6%, rgba(41,80,153,.26), transparent 58%), 1160 radial-gradient(58% 80% at 92% 24%, rgba(0,162,135,.14), transparent 60%), 1161 linear-gradient(180deg,#16294f 0%,#0c1426 46%,#080d18 100%);overflow:hidden} 1162.footer_top,.footer_bottom{position:relative;z-index:1} 1163.footer_top{display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem 3rem;flex-wrap:wrap;border-bottom:1px solid #ffffff14;padding-bottom:2.5rem} 1164.footer_lead{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem;flex:0 0 auto} 1165/* 2026-08-18: the pillar line sits under the circle lockup. Nicole flagged the dead blue space 1166 beside the logo; the tagline fills it and promotes Learn/Earn/Eat/Heal out of the nav (Pete: both). */ 1167.footer_tagline{font-family:var(--display);font-weight:400;font-size:1.0625rem;letter-spacing:.055em;text-transform:uppercase;color:#9fb2cd;margin:0} 1168.footer_follow{display:flex;flex-direction:column;align-items:flex-start;width:100%} 1169.footer_social{display:flex;align-items:center;gap:1rem} 1170.footer_social-link{display:inline-flex;color:#c2d2e6;transition:color .2s,transform .2s} 1171.footer_social-link:hover{color:#fff;transform:translateY(-2px)} 1172.footer_social-link:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;border-radius:.25rem} 1173.footer_social-svg{display:block;width:1.25rem;height:1.25rem} 1174.footer_logo{width:clamp(9rem,13vw,10.5rem);height:auto;opacity:.98} 1175.footer_cols{display:flex;gap:clamp(1.75rem,3vw,3.25rem);flex-wrap:wrap;flex:0 1 auto;justify-content:flex-end} 1176.footer_col-stay{display:flex;flex-direction:column;gap:2rem;flex:1 1 18rem;max-width:23rem} 1177.footer_seal{width:5rem;height:auto;display:block;margin-top:1.25rem} 1178.footer_head{font-family:'Space Mono',monospace;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#6f84a4;margin:0 0 1rem} 1179.footer_link{display:block;font-size:.875rem;color:#c2d2e6;padding:.3125rem 0;text-decoration:none;transition:color .2s} 1180.footer_link:hover{color:#fff} 1181.footer_link:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;border-radius:.25rem} 1182.footer_bottom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.625rem;margin-top:2.125rem;font-size:.8125rem;color:#6f84a4} 1183.footer_btmline{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap} 1184.footer_credit{color:#5f7391} 1185.footer_legal{display:flex;align-items:center;gap:1.125rem;flex-wrap:wrap} 1186.footer_legal-link{color:#6f84a4;text-decoration:none;transition:color .2s} 1187.footer_legal-link:hover{color:#c2d2e6} 1188.footer_legal-link:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;border-radius:.25rem} 1189.footer_signup{width:100%;max-width:23rem;margin:0} 1190.footer_signup-h{font-family:var(--display);font-weight:400;font-size:1.375rem;line-height:1.15;color:#fff;margin:0 0 .5rem} 1191.footer_signup-p{font-size:.875rem;line-height:1.55;color:#9fb2cd;margin:0 0 1.125rem} 1192.footer_form{display:flex;gap:.5rem;flex-wrap:wrap} 1193.footer_field{flex:1 1 12rem;min-width:0} 1194.footer_field-half{flex:1 1 8rem} 1195.footer_input{width:100%;font-family:var(--body);font-size:.875rem;color:#fff;background:rgba(255,255,255,.06);
1196 border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.75rem 1.125rem;transition:border-color .2s,background .2s} 1197.footer_input::placeholder{color:#6f84a4} 1198.footer_input:focus{outline:none;border-color:var(--sky);background:rgba(255,255,255,.1)} 1199.footer_submit{flex:0 0 auto;font-family:var(--body);font-weight:600;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase; 1200 color:#241502;background:var(--orange);border:none;border-radius:999px;padding:.75rem 1.5rem;cursor:pointer; 1201 transition:background .25s,color .25s,transform .25s} 1202.footer_submit:hover{background:var(--red);color:#fff;transform:translateY(-1px)} 1203.footer_submit:focus-visible{outline:2px solid #fff;outline-offset:2px} 1204.footer_sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} 1205@media(max-width:767px){ .footer{clip-path:ellipse(380% 100% at 50% 100%);padding-top:clamp(3rem,8vh,4.5rem)} .footer_top{flex-direction:column;gap:2.75rem} .footer_lead{flex:1 1 auto} .footer_cols{flex-direction:column;gap:2.75rem;justify-content:flex-start} .footer_col-stay{max-width:none;flex:1 1 auto} .footer_signup{max-width:none;width:100%} } 1206</style> 1207<footer class="section footer" id="footer"> 1208 <div class="footer_top"> 1209 <div class="footer_lead"> 1210 <a class="footer_brand" href="/" aria-label="FreshMinistries home"> 1211 <img class="media footer_logo" src="/img/logo-footer-clrwht.png" alt="FreshMinistries and Be The Change International"> 1212 </a> 1213 <p class="footer_tagline">Learn. Earn. Eat. Heal.</p> 1214 </div> 1215 <div class="footer_cols"> 1216 <!-- COLUMN 1: Stay in the loop + Follow/social --> 1217 <div class="footer_col footer_col-stay"> 1218 <!-- NEWSLETTER -- INERT BY DESIGN, and deliberately quiet about it. 1219 No email provider is wired yet (MASTER-RULES OPEN #3). The field and the button are 1220 `disabled`, so nothing is ever captured and no address can be silently discarded. 1221 It is styled exactly as designed -- there is intentionally NO "coming soon" banner: 1222 this is a staging site and the notice was louder than the problem. 1223 TO GO LIVE: wire the provider (Mailchimp / Bloomerang), add the real action + method, 1224 then delete the two `disabled` attributes. 1225 DO NOT "fix" this with action="#" -- that looks like it works and throws the email away. --> 1226 <form class="footer_signup" novalidate> 1227 <h3 class="footer_signup-h">See the impact. Follow the work.</h3> 1228 <p class="footer_signup-p">Sign up for stories, updates, and ways to get involved, from Jacksonville to communities around the world.</p> 1229 <label class="footer_sronly" for="footerFirst">First name</label> 1230 <label class="footer_sronly" for="footerLast">Last name</label> 1231 <label class="footer_sronly" for="footerEmail">Email address</label> 1232 <div class="footer_form"> 1233 <span class="footer_field footer_field-half"><input class="footer_input" id="footerFirst" type="text" name="first_name" placeholder="First name" autocomplete="given-name" required disabled></span> 1234 <span class="footer_field footer_field-half"><input class="footer_input" id="footerLast" type="text" name="last_name" placeholder="Last name" autocomplete="family-name" required disabled></span> 1235 <span class="footer_field"><input class="footer_input" id="footerEmail" type="email" name="email" placeholder="[email protected]" autocomplete="email" required disabled></span> 1236 <button class="footer_submit" type="submit" disabled>Subscribe</button> 1237 </div> 1238 </form> 1239 <div class="footer_follow"> 1240 <h3 class="footer_signup-h">Follow</h3> 1241 <div class="footer_social"> 1242 <a class="footer_social-link" href="https://www.facebook.com/FreshMinistries/" target="_blank" rel="noopener" aria-label="Facebook"><svg class="footer_social-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 9V7.4c0-.6.4-.8.7-.8H16V4h-2.3C11 4 10.5 6 10.5 7.3V9H8.5v3h2v8h3v-8h2.2l.3-3z"/></svg></a> 1243 <a class="footer_social-link" href="https://www.instagram.com/freshministries/" target="_blank" rel="noopener" aria-label="Instagram"><svg class="footer_social-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.8"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></svg></a> 1244 <a class="footer_social-link" href="https://www.youtube.com/channel/UCqlwglTByp-dF7UKQKvtSyw" target="_blank" rel="noopener" aria-label="YouTube"><svg class="footer_social-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 8.2a3 3 0 0 0-2.1-2.1C18 5.6 12 5.6 12 5.6s-6 0-7.9.5A3 3 0 0 0 2 8.2C1.5 10 1.5 12 1.5 12s0 2 .5 3.8A3 3 0 0 0 4.1 18c1.9.5 7.9.5 7.9.5s6 0 7.9-.5a3 3 0 0 0 2.1-2.1c.5-1.8.5-3.8.5-3.8s0-2-.5-3.8zM10 15.3V8.7l5.7 3.3z"/></svg></a> 1245 <a class="footer_social-link" href="https://www.linkedin.com/company/fresh-ministries-inc/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg class="footer_social-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.9 8.8v11.2H3.6V8.8zM5.25 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM20.4 20H17v-5.9c0-1.4-.5-2.4-1.8-2.4-1 0-1.5.7-1.7 1.3-.1.2-.1.5-.1.9V20h-3.3V9.4h3.2v1.4c.44-.7 1.2-1.6 2.9-1.6 2.1 0 3.7 1.4 3.7 4.4z"/></svg></a> 1246 </div> 1247 </div> 1248 </div> 1249 <!-- COLUMN 2: Local Programs -> program-page slugs (FreshFoundations -> weaver-center page, decision pending) --> 1250 <div class="footer_col"> 1251 <h4 class="footer_head">Local Programs</h4> 1252 <a class="footer_link" href="/freshfutures">FreshFutures</a> 1253 <a class="footer_link" href="/freshpath">FreshPath</a> 1254 <a class="footer_link" href="/freshfoundations">FreshFoundations</a> 1255 <a class="footer_link" href="/freshfamilies">FreshFamilies</a> 1256 <a class="footer_link" href="/lifepoint-career-institute">
1256LifePoint Career Institute</a> 1257 <a class="footer_link" href="/beaver-street-enterprise-center">Beaver Street Enterprise Center</a> 1258 <a class="footer_link" href="/outpatient-counseling">Outpatient Counseling</a> 1259 <a class="footer_link" href="/nativefresh">NativeFresh Aquaponics</a> 1260 </div> 1261 <!-- COLUMN 3: Global Programs (WPM added 2026-07-29, BW-NAV-IA per the adopted IA) --> 1262 <div class="footer_col"> 1263 <h4 class="footer_head">Global Programs</h4> 1264 <a class="footer_link" href="/global">Be The Change International</a> 1265 <a class="footer_link" href="/desmond-tutu">Desmond Tutu Programme</a> 1266 <a class="footer_link" href="/aquaponics">Global Aquaponics</a> 1267 <a class="footer_link" href="/worldwide-pilgrimage-ministries">Worldwide Pilgrimage Ministries</a> 1268 </div> 1269 <!-- COLUMN 4: FreshMinistries --> 1270 <div class="footer_col"> 1271 <h4 class="footer_head">FreshMinistries</h4> 1272 <a class="footer_link" href="/about">About</a> 1273 <a class="footer_link" href="/global">Global</a> 1274 <a class="footer_link" href="/news">News</a> 1275 <a class="footer_link" href="/get-involved">Get Involved</a> 1276 <a class="footer_link" href="/give">Give</a> 1277 <!-- FLAG: seal link -> Candid/GuideStar profile URL TBD (left unlinked) --> 1278 <img class="footer_seal" src="/img/gold-seal.webp" width="80" alt="Candid 2018 Gold Seal of Transparency"> 1279 </div> 1280 </div> 1281 </div> 1282 <div class="footer_bottom"> 1283 <span class="footer_btmline"> 1284 <span>FreshMinistries</span> · 1285 <span>EIN #59-2967898</span> · 1286 <span>Headquartered in Jacksonville, FL</span> · 1287 <a class="footer_legal-link" href="/privacy-policy">Privacy Policy</a> · 1288 <a class="footer_legal-link" href="/copyright-notice">Copyright</a> · 1289 <a class="footer_legal-link" href="/sources-of-support">Sources of Support</a> · 1290 <span>© Copyright 2026</span> 1291 </span> 1292 <span class="footer_credit">Site by <a class="footer_legal-link" href="https://perceptionmarketingbrand.com" target="_blank" rel="noopener">Perception Marketing</a></span> 1293 </div> 1294</footer> 1295 1296<!-- ============================================================ 1297 SHARED CDN -- loaded ONCE, before the per-section scripts. 1298 GSAP 3.13 core + ScrollTrigger + SplitText: nav wave overlay, 1299 hero split-text entrance, headline reveals, quiet fade-ups. 1300 NO Three.js -- zero WebGL on this page. 1301 ============================================================ -->
1302<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
vendor: 2 bytes, line 1302
1302
1303<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js"></script>
vendor: 2 bytes, line 1303
1303
1304<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/SplitText.min.js"></script>
1304 1305 1306<!-- ===================== SHARED TEXT-REVEAL (mask + per-character cascade) -- lifted from home.html ===================== --> 1307<style> 1308.fm-splitline{line-height:1.2} 1309.fm-char{display:inline-block} 1310</style>
1311<script> 1312/* ONE shared helper, reused by every key section headline. See home.html for the full contract. 1313 No-op (heading stays fully visible) if GSAP or SplitText is missing; the CALLER owns the 1314 reduced-motion decision (never calls this when reduced), so a heading can never stick hidden. */ 1315if(window.gsap && window.SplitText){ gsap.registerPlugin(window.SplitText); } 1316window.FMReveal = (function(){ 1317 function revealHeadline(heading, risers, opts){ 1318 if(!heading || !window.gsap || !window.SplitText) return; /* bail -> heading stays fully visible */ 1319 opts = opts || {}; 1320 var rs = []; 1321 (risers || []).forEach(function(sel){ 1322 if(typeof sel === 'string'){ rs = rs.concat(gsap.utils.toArray(sel)); } 1323 else if(sel){ rs.push(sel); } 1324 }); 1325 try{ 1326 window.SplitText.create(heading, { 1327 type:'lines,chars', mask:'lines', autoSplit:true, linesClass:'fm-splitline', charsClass:'fm-char', 1328 onSplit:function(self){ 1329 var risersAt = (opts.risersAt != null) ? opts.risersAt : 0.15; 1330 var tl = gsap.timeline({ scrollTrigger:{ trigger:(opts.trigger || heading), start:(opts.start || 'top 82%'), once:true, invalidateOnRefresh:false } }); 1331 tl.fromTo(self.chars, {yPercent:120}, {yPercent:0, duration:1.05, stagger:0.045, ease:'power4.out'}, 0); 1332 if(rs.length){ 1333 tl.fromTo(rs, {opacity:0, y:8}, {opacity:1, y:0, duration:1.4, ease:'power2.out', stagger:0.06, clearProps:'transform'}, risersAt); 1334 } 1335 return tl; 1336 } 1337 }); 1338 }catch(e){ /* SplitText failed -> heading + risers stay visible */ } 1339 } 1340 return { revealHeadline: revealHeadline }; 1341})(); 1342</script>
1342 1343 1344<!-- ===================== SECTION SCRIPTS (in order, IIFEs) ===================== --> 1345 1346<!-- NAV -- scrolled state + logo shrink + accessible wave overlay (home.html r22/r23 script, 1347 via the about.html light-hero sync; the -wht/-ink logo guards no-op on this single-logo nav) -->
1348<script> 1349(function(){ 1350 var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1351 var hasGSAP = !!window.gsap; 1352 var nav = document.getElementById('topnav'); 1353 if(!nav) return; 1354 var brandLogos = nav.querySelectorAll('.topnav_logo'); 1355 var logoWht = nav.querySelector('.topnav_logo-wht'); 1356 var logoInk = nav.querySelector('.topnav_logo-ink'); 1357 var lastY = window.scrollY; 1358 function onScroll(){ 1359 var y = window.scrollY; 1360 var sc = y > 60; 1361 nav.classList.toggle('is-scrolled', sc); 1362 for(var i=0;i<brandLogos.length;i++){ brandLogos[i].classList.toggle('is-small', sc); } 1363 if(logoWht) logoWht.classList.toggle('is-off', sc); 1364 if(logoInk) logoInk.classList.toggle('is-on', sc); 1365 if(Math.abs(y - lastY) > 6){ 1366 if(y > lastY && y > 150) nav.classList.add('is-tucked'); 1367 else if(y < lastY) nav.classList.remove('is-tucked'); 1368 lastY = y; 1369 } 1370 if(y <= 60) nav.classList.remove('is-tucked'); 1371 } 1372 window.addEventListener('scroll', onScroll, {passive:true}); onScroll(); 1373 })(); 1374</script>
1374 1375 1376<!-- HERO -- SplitText entrance (masked per-char cascade on the H1 + the sky sweep reconstituted 1377 per character, then kicker/sub/CTA rise). FOUC-guard partner: every bail path unhides, and 1378 the 3.5s failsafe unhides -- text can never stick hidden. -->
1379<script> 1380(function(){ 1381 var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1382 var hasGSAP = !!window.gsap; 1383 1384 function applySweep(self){ 1385 (self.lines || []).forEach(function(lineEl){ 1386 var cs = lineEl.querySelectorAll('.fm-char'); 1387 if(!cs.length) return; 1388 var first = cs[0].getBoundingClientRect(); 1389 var last = cs[cs.length - 1].getBoundingClientRect(); 1390 var w = Math.max(1, last.right - first.left); 1391 for(var i=0;i<cs.length;i++){ 1392 cs[i].classList.add('dhero_sweep'); 1393 var r = cs[i].getBoundingClientRect(); 1394 cs[i].style.backgroundSize = w + 'px 100%'; 1395 cs[i].style.backgroundPositionX = -(r.left - first.left) + 'px'; 1396 } 1397 }); 1398 } 1399 function showHero(){ 1400 ['.dhero_kick','.dhero_title','.dhero_sub','.dhero_btn'].forEach(function(sel){ 1401 document.querySelectorAll(sel).forEach(function(el){ el.style.visibility = 'visible'; }); 1402 }); 1403 var title = document.querySelector('.dhero_title'); 1404 if(title && !title.querySelector('.fm-char')){ title.classList.add('dhero_sweep'); } 1405 } 1406 function heroEntrance(){ 1407 if(!hasGSAP || reduce || !window.SplitText){ showHero(); return; } 1408 var title = document.querySelector('.dhero_title'); 1409 if(!title){ showHero(); return; } 1410 try{ 1411 window.SplitText.create(title, { 1412 type:'lines,chars', mask:'lines', autoSplit:true, linesClass:'fm-splitline', charsClass:'fm-char', 1413 onSplit:function(self){ 1414 applySweep(self); 1415 var t = gsap.fromTo(self.chars, {yPercent:120}, {yPercent:0, duration:1.05, stagger:0.05, ease:'power4.out', delay:0.4}); 1416 gsap.set(title, {visibility:'visible'}); 1417 return t; 1418 } 1419 }); 1420 }catch(e){ showHero(); return; } 1421 gsap.timeline() 1422 .fromTo('.dhero_kick', {opacity:0, y:8}, {opacity:1, y:0, duration:.9, ease:'power2.out', immediateRender:true}, 0.25) 1423 .fromTo('.dhero_sub', {opacity:0, y:10}, {opacity:1, y:0, duration:1.4, ease:'power2.out', immediateRender:true}, 0.7) 1424 .fromTo('.dhero_cta .dhero_btn', {opacity:0, y:12}, {opacity:1, y:0, duration:0.8, ease:'power2.out', clearProps:'transform', immediateRender:true}, 1.0); 1425 gsap.set(['.dhero_kick','.dhero_sub','.dhero_cta .dhero_btn'], {visibility:'visible'}); 1426 } 1427 if(document.readyState !== 'loading') heroEntrance(); 1428 else document.addEventListener('DOMContentLoaded', heroEntrance); 1429 setTimeout(showHero, 3500); 1430})(); 1431</script>
1431 1432 1433<!-- SCROLL-REVEAL SYSTEM -- FMReveal cascades on the section H2s (their copy/actions rise as 1434 risers), plus one quiet fade-up per .reveal block. Honors reduced-motion (whole block 1435 bails -> content stays visible; no CSS pre-hiding). -->
1436<script> 1437(function(){ 1438 'use strict'; 1439 var reduce = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); 1440 if(!window.gsap || !window.ScrollTrigger || reduce) return; 1441 gsap.registerPlugin(ScrollTrigger); 1442 1443 document.querySelectorAll('.reveal').forEach(function(el){ 1444 gsap.fromTo(el, 1445 {autoAlpha:0, y:28}, 1446 {autoAlpha:1, y:0, duration:.8, ease:'power3.out', 1447 scrollTrigger:{trigger:el, start:'top 88%', once:true}}); 1448 }); 1449 1450 var R = window.FMReveal; 1451 if(!R || !R.revealHeadline) return; 1452 1453 R.revealHeadline(document.querySelector('.form_title'), 1454 ['.form_intro'], 1455 { trigger:'.form_head' }); 1456 1457 R.revealHeadline(document.querySelector('.loc_title'), 1458 ['.loc_intro'], 1459 { trigger:'.loc_head' }); 1460 1461 R.revealHeadline(document.querySelector('.ctafeat_title'), 1462 ['.ctafeat_copy', '.ctafeat_actions'], 1463 { trigger:'.ctafeat' }); 1464})(); 1465</script>
1465 1466 1467<!-- MEDIA BREAK -- ScrollTrigger scrub for the full-width image band (volunteer.html 1468 media-break script, zoom branch): the media settles 1.12 -> 1 across the full viewport 1469 crossing while the frame stays fixed. All motion lives in the JS fromTo (no CSS 1470 pre-transforms), so no-JS and reduced-motion render static at rest. Transform-only (GPU), 1471 safe on touch (the scrub rides the page scroll). WEBFLOW PORT: ships as one embed. -->
1472<script> 1473(function(){ 1474 'use strict'; 1475 var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1476 if(!window.gsap || !window.ScrollTrigger || reduce) return; /* static frame + media, no transforms */ 1477 gsap.registerPlugin(ScrollTrigger); 1478 var secs = document.querySelectorAll('.mbreak'); 1479 for(var i=0;i<secs.length;i++){ 1480 var frame = secs[i].querySelector('.mbreak_frame'); 1481 var media = secs[i].querySelector('.mbreak_media'); 1482 if(!frame || !media) continue; 1483 /* ZOOM -- the zoomband mechanic in-column: settles 1.12 -> 1 across the full crossing. 1484 CSS origin 50% 45% keeps the likely subject area (upper-middle) in view. */ 1485 gsap.fromTo(media, {scale:1.12}, {scale:1, ease:'none', 1486 scrollTrigger:{trigger:frame, start:'top bottom', end:'bottom top', scrub:true}}); 1487 } 1488})(); 1489</script>
1489 1490 1491<!-- CONTACT FORM -- brand chip toggles (checkbox state -> .is-on) + prevent wireframe submit 1492 (form-signup.html script, verbatim mechanics). -->
1493<script> 1494(function(){ 1495 document.querySelectorAll('.form_chip').forEach(function(chip){ 1496 var cb = chip.querySelector('.form_check'); 1497 if(!cb) return; 1498 function sync(){ chip.classList.toggle('is-on', cb.checked); } 1499 cb.addEventListener('change', sync); 1500 sync(); 1501 }); 1502 var cform = document.getElementById('contactForm'); 1503 if(cform){ cform.addEventListener('submit', function(e){ e.preventDefault(); }); } 1504})(); 1505</script>
1505 1506 1507<!-- FM LIVE EDITOR -- Pete's ?edit=1 (or Alt+Shift+E) tuning layer, same as the program pages. 1508 discover() auto-keys each top-level section by its id (#top / #contact / loc / #give / #footer), 1509 so the Section/Text/Grid/Image tools bind with no per-section markup. The form now rides the 1510 canonical .section_grid > u-cols-2-7 child, so the Grid + Width tools can select and tune it. --> 1511<!-- LIVE EDITOR (gated): the fm-editor overlay loads ONLY with ?edit in the query string. 1512 Clients/visitors never see it; Pete still gets it at ?edit=1. --> 1513<!-- fm:editor-disabled 2026-08-11 -- scripts/editor-disable.py --restore -->
1514<script src="/fm-search.js" defer></script>
1514 1515 1516 1517 1518<!-- FM-NAV-FS:JS -->
1519<script data-fm="nav-fs"> 1520/* ============================================================ 1521 FM FULL-SCREEN NAV OVERLAY (FS) controller. 1522 Opened by the EXISTING topnav hamburger (#navToggle) on all viewports. 1523 BUILD WAVE 2026-07-29 (BW-NAV-IA): C1-C "Horizon" desktop -- hover/focus 1524 on the line swaps the pane below it and glides the 7-color runner under 1525 the active item; leaving the line rests the pane + runner after 350ms. 1526 Mobile: C1-B accordion (caret / label toggles), unchanged mechanics. 1527 On open: set .topnav.is-menu (bar's own children fade; hamburger morphs to 1528 X in place), offset the vanished scrollbar via --sbw, lock body scroll, and 1529 play the GSAP wave reveal (fade + solid-floor fallback without GSAP / reduced 1530 motion). Escape + click-outside + a focus trap that keeps the hamburger (the 1531 close control) in the loop, focus restore on close. The in-menu search button 1532 opens the sitewide fm-search overlay (z-2000, above this menu). Reuses the 1533 page's already loaded GSAP -- does NOT load its own copy. 1534 ============================================================ */ 1535(function(){ 1536 if(window.__fmNavFS) return; window.__fmNavFS = true; 1537 var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1538 var hasGSAP = !!window.gsap; 1539 1540 var toggle = document.getElementById('navToggle'); 1541 var menu = document.getElementById('fsMenu'); 1542 if(!toggle || !menu) return; 1543 var topnav = document.getElementById('topnav'); 1544 var bars = toggle.querySelectorAll('.topnav_bar'); 1545 var path = document.getElementById('fsWavePath'); 1546 var items = Array.prototype.slice.call(menu.querySelectorAll('.nav2_item')); 1547 var panels = Array.prototype.slice.call(menu.querySelectorAll('.nav2_panel')); 1548 var carets = Array.prototype.slice.call(menu.querySelectorAll('.nav2_caret')); 1549 var runner = document.getElementById('fsRunner'); 1550 var list = menu.querySelector('.nav2_list'); 1551 var searchBtn = menu.querySelector('.nav2_search'); 1552 var isOpen = false, openTl = null, closeTl = null, restTimer = null, lastKey = 'default'; 1553 var useWave = hasGSAP && !reduce && !!path; 1554 var mqMobile = window.matchMedia('(max-width:860px)'); 1555 1556 /* wave path keyframes -- INIT collapsed sliver / WAVE mid-crest / FULL crest 1557 clamped BELOW the viewport floor (all y > 1000) so the fill covers the whole 1558 screen with margin -- the bottom-clip / sliver fix. */ 1559 var INIT='M0 2S175 1 500 1s500 1 500 1V0H0Z'; 1560 var WAVE='M0 502S175 272 500 272s500 230 500 230V0H0Z'; 1561 var FULL='M0,1006S175,1002,500,1002s500,4,500,4V0H0Z'; 1562 1563 /* ---------- the 7-color runner (desktop): rests centered, glides under the active item ---------- */ 1564 function moveRunner(key){ 1565 if(!runner || !list || mqMobile.matches) return; 1566 if(!key || key === 'default'){ 1567 var w = Math.min(224, list.clientWidth * .22); 1568 runner.style.width = w + 'px'; 1569 runner.style.transform = 'translateX(' + ((list.clientWidth - w) / 2) + 'px)'; 1570 return; 1571 } 1572 var it = list.querySelector('.nav2_item[data-panel="' + key + '"]'); 1573 if(!it) return; 1574 runner.style.width = it.offsetWidth + 'px'; 1575 runner.style.transform = 'translateX(' + it.offsetLeft + 'px)'; 1576 } 1577 1578 /* ---------- panel swap ---------- */ 1579 function showPanel(key){ 1580 for(var i=0;i<panels.length;i++){ 1581 panels[i].classList.toggle('is-active', panels[i].getAttribute('data-panelbody')===key); 1582 } 1583 for(var j=0;j<items.length;j++){ 1584 items[j].classList.toggle('is-active', items[j].getAttribute('data-panel')===key); 1585 } 1586 for(var k=0;k<carets.length;k++){ 1587 carets[k].setAttribute('aria-expanded', carets[k].getAttribute('data-panel')===key ? 'true':'false'); 1588 } 1589 lastKey = key || 'default'; 1590 moveRunner(lastKey); 1591 } 1592 function resetPanels(){ showPanel(mqMobile.matches ? null : 'default'); } 1593 function toggleAccordion(key){ 1594 var active = menu.querySelector('.nav2_panel.is-active'); 1595 var curr = active ? active.getAttribute('data-panelbody') : null; 1596 showPanel(curr === key ? null : key); 1597 } 1598 1599 /* desktop hover/focus reveals the pane; mobile Follow (a <button>) toggles */
1600 items.forEach(function(it){ 1601 var key = it.getAttribute('data-panel'); 1602 it.addEventListener('mouseenter', function(){ if(!mqMobile.matches){ clearTimeout(restTimer); showPanel(key || 'default'); } }); 1603 it.addEventListener('focus', function(){ if(!mqMobile.matches){ clearTimeout(restTimer); showPanel(key || 'default'); } }); 1604 it.addEventListener('click', function(e){ 1605 if(mqMobile.matches && it.tagName === 'BUTTON'){ e.preventDefault(); toggleAccordion(key); } 1606 }); 1607 }); 1608 carets.forEach(function(btn){ 1609 btn.addEventListener('click', function(e){ 1610 e.preventDefault(); 1611 toggleAccordion(btn.getAttribute('data-panel')); 1612 }); 1613 }); 1614 /* C1-C: leaving the line + its stage rests the pane and re-centers the runner. 1615 The panes are DOM descendants of .nav2_list, so moving from the line down 1616 into a pane never counts as leaving -- only truly walking away does. */ 1617 if(list){ 1618 list.addEventListener('mouseleave', function(){ 1619 if(mqMobile.matches) return; 1620 clearTimeout(restTimer); 1621 restTimer = setTimeout(function(){ showPanel('default'); }, 350); 1622 }); 1623 list.addEventListener('mouseenter', function(){ clearTimeout(restTimer); }); 1624 } 1625 1626 /* in-menu search (locked): hand off to the sitewide fm-search overlay, which 1627 owns the real input (z-2000). Close the menu FIRST so the two overlays 1628 never fight over the body scroll lock; the topnav trigger is hidden while 1629 the menu is open but stays programmatically clickable. If fm-search has 1630 not injected its trigger yet, this is a harmless no-op. */ 1631 if(searchBtn){ 1632 searchBtn.addEventListener('click', function(){ 1633 var t = document.querySelector('.fmsx_trigger'); 1634 if(!t) return; 1635 setOpen(false); 1636 t.click(); 1637 }); 1638 } 1639 1640 /* ---------- open / close ---------- */ 1641 function playOpen(){ 1642 if(closeTl) closeTl.kill(); 1643 menu.classList.add('is-open','is-wave'); 1644 openTl = gsap.timeline(); 1645 openTl.set(path,{attr:{d:INIT}}) 1646 .set('#fsMenu .nav2_grid',{autoAlpha:1}) 1647 .to(path,{duration:0.5,attr:{d:WAVE},ease:'power2.in'}) 1648 .to(path,{duration:0.5,attr:{d:FULL},ease:'power2.out'},'-=0.12') 1649 .call(function(){ menu.classList.add('is-covered'); moveRunner(lastKey); }, null, '-=0.34') 1650 .fromTo('#fsMenu .nav2_search',{autoAlpha:0},{autoAlpha:1,duration:0.45,ease:'power2.out',clearProps:'opacity,visibility'},'-=0.34') 1651 .fromTo('#fsMenu .nav2_head',{autoAlpha:0,y:28},{autoAlpha:1,y:0,duration:0.5,ease:'power3.out',stagger:0.07,clearProps:'opacity,visibility,transform'},'-=0.4') 1652 .fromTo('#fsMenu .nav2_panel.is-active',{autoAlpha:0,y:14},{autoAlpha:1,y:0,duration:0.5,ease:'power3.out',clearProps:'opacity,visibility,transform'},'-=0.4'); 1653 } 1654 function playClose(onDone){ 1655 if(openTl) openTl.kill(); 1656 menu.classList.remove('is-covered'); 1657 closeTl = gsap.timeline({onComplete:function(){ menu.classList.remove('is-open','is-wave'); if(onDone) onDone(); }}); 1658 closeTl.to('#fsMenu .nav2_grid',{autoAlpha:0,duration:0.22,ease:'power2.in'}) 1659 .to(path,{duration:0.45,attr:{d:WAVE},ease:'power2.in'},'-=0.05') 1660 .to(path,{duration:0.4,attr:{d:INIT},ease:'power2.out'},'-=0.16'); 1661 } 1662 1663 function setOpen(open){ 1664 if(open === isOpen) return; 1665 isOpen = open; 1666 for(var i=0;i<bars.length;i++){ bars[i].classList.toggle('is-open', open); } /* hamburger -> X in place */ 1667 toggle.setAttribute('aria-expanded', open ? 'true':'false'); 1668 toggle.setAttribute('aria-label', open ? 'Close menu':'Open menu'); 1669 if(open) resetPanels(); 1670 /* the bar STAYS (z-60, above the z-55 overlay); only its other items fade via 1671 .is-menu. --sbw offsets the scrollbar that vanishes with the body lock so 1672 the hamburger does not teleport. */ 1673 if(open && topnav){ 1674 topnav.classList.remove('is-tucked'); 1675 var sbw = window.innerWidth - document.documentElement.clientWidth; 1676 document.documentElement.style.setProperty('--sbw', sbw + 'px'); 1677 topnav.classList.add('is-menu'); 1678 } 1679 if(!open && menu.contains(document.activeElement)){ try{document.activeElement.blur();}catch(e){} } 1680 menu.setAttribute('aria-hidden', open ? 'false':'true'); 1681 document.body.style.overflow = open ? 'hidden':''; 1682 if(!open){ document.documentElement.style.setProperty('--sbw','0px'); } 1683 1684 if(useWave){ 1685 if(open){ playOpen(); } 1686 else { playClose(function(){ if(topnav) topnav.classList.remove('is-menu'); try{ toggle.focus(); }catch(e){} }); } 1687 } else { 1688 /* no-GSAP / reduced-motion: no morph, just cover + fade */ 1689 if(path) path.setAttribute('d', open ? FULL : INIT);
1690 menu.classList.toggle('is-open', open); 1691 menu.classList.toggle('is-covered', open); 1692 if(open){ setTimeout(function(){ moveRunner(lastKey); }, 30); } 1693 if(!open && topnav) topnav.classList.remove('is-menu'); 1694 if(!open){ setTimeout(function(){ try{ toggle.focus(); }catch(e){} }, 30); } 1695 } 1696 if(open){ setTimeout(function(){ try{ menu.focus(); }catch(e){} }, 60); } 1697 } 1698 1699 /* ---------- wiring ---------- */ 1700 toggle.addEventListener('click', function(){ setOpen(!isOpen); }); 1701 /* click the empty navy (not a link/button) closes */ 1702 menu.addEventListener('click', function(e){ 1703 if(e.target === menu || e.target.classList.contains('nav2_solid') || 1704 e.target.classList.contains('nav2_wave') || e.target.classList.contains('nav2_grid') || 1705 e.target.classList.contains('nav2_list')){ 1706 setOpen(false); 1707 } 1708 }); 1709 document.addEventListener('keydown', function(e){ 1710 if(!isOpen) return; 1711 if(e.key === 'Escape'){ setOpen(false); return; } 1712 if(e.key === 'Tab'){ 1713 var f = menu.querySelectorAll('a[href],button:not([disabled]),[tabindex]:not([tabindex="-1"])'); 1714 var vis = []; 1715 for(var i=0;i<f.length;i++){ if(f[i].offsetParent !== null) vis.push(f[i]); } 1716 vis.unshift(toggle); /* the hamburger (the close control) stays in the loop */ 1717 if(!vis.length) return; 1718 var first = vis[0], last = vis[vis.length-1]; 1719 if(e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); } 1720 else if(!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); } 1721 } 1722 }); 1723 window.addEventListener('resize', function(){ if(isOpen) moveRunner(lastKey); }); 1724 if(document.fonts && document.fonts.ready){ document.fonts.ready.then(function(){ if(isOpen) moveRunner(lastKey); }); } 1725 mqMobile.addEventListener('change', function(){ if(isOpen) resetPanels(); }); 1726})(); 1727</script>
vendor: 2 bytes, line 1727
1727
1728<script src="/fm-cms.js"></script>
1728 1729<!-- /FM-NAV-FS:JS -->
1730<script src="/fm-forms.js" defer></script>
1730 1731</body> 1732</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.