{"version":3,"file":"AutoHideHeader.463k3YOU.mjs","names":["useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/40LVEsJcJPOSKp4chqqe/mMhzAD71I9qDI2BTQFeP/AutoHideHeader.js"],"sourcesContent":["// Auto-hiding site header, for every page.\n//\n// Scrolling down slides the sticky site header and the \"You are exploring…\"\n// bar up out of sight, so the page has the whole screen. Scrolling back up,\n// even a little, slides them back in. At the very top they always show.\n//\n// withSiteAutoHide runs it. It sits on the \"Copyright\" frame of the layout\n// template, which is on every page, and finds the bars from there: the sticky\n// layers of the template. At the top of a page the bars leave with the page as\n// it scrolls, exactly as a normal header would, so no page needs resizing.\n//\n// withHeaderPin is for a section that pins right under the header (the\n// Donation and Fund a Cohort hero stages). It keeps the section's top edge on\n// the header's bottom edge, so the section moves up to the top of the screen\n// while the header is away instead of leaving an empty strip. The pinned \"Why\"\n// stages (the first child of a frame carrying withWhyTrack) get the same\n// treatment automatically.\n//\n// withAutoHideHeader is the Host a Sponsor Session hero. From tablet width up\n// that hero is pulled up underneath the header (and its top padding grows by\n// the same amount), so the header there lies over the hero photo and slides\n// off it as soon as the page moves. On phones the hero stays below the header\n// and is as tall as the rest of the screen.\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{RenderTarget}from\"framer\";// Scroll distance (px) in one direction before the header reacts\nconst HIDE_AFTER_DOWN=12;const SHOW_AFTER_UP=6;// Always show the bars within this distance (px) of the top of the page\nconst TOP_ZONE=4;// A pulled-up hero slides under the header from this width up (the Tablet breakpoint)\nconst OVERLAP_MIN_WIDTH=810;// Header height (without the banner), used until the real height is measured\nconst DEFAULT_BARS_HEIGHT=72;const BARS_VAR=\"--auto-hide-bars\";// How much of the top of the screen the bars cover right now (0 while away)\nconst COVER_VAR=\"--auto-hide-cover\";// How long pinned sections take to follow the bars (0 while the bars follow the scroll)\nconst SLIDE_VAR=\"--auto-hide-ms\";// Set on <html> while the header is driven: \"overlap\" on a page with a\n// pulled-up hero at tablet width or more, \"flow\" everywhere else\nconst MODE_ATTRIBUTE=\"data-auto-hide\";// The pulled-up hero's own top padding on the canvas. Pulled up under the\n// header, the header's height is added to it, so its content never sits under\n// the header. The hero's text is bottom-aligned, with the canvas bottom padding.\nconst HERO_PADDING=48;// The \"Why\" stages pin this far down the screen on the canvas, partly under the header\nconst WHY_STAGE_TOP=48;// The banner comes and goes as pages change. The bars are looked up again when\n// the page content is swapped and, as a fallback, this often (ms) while scrolling\nconst RESCAN_MS=400;const SLIDE_MS=350;const EASE=\"cubic-bezier(0.22, 1, 0.36, 1)\";const SLIDE=`transform ${SLIDE_MS}ms ${EASE}`;const overlapCss=`\n@media (min-width: ${OVERLAP_MIN_WIDTH}px) {\n    style[data-auto-hide-header] + * {\n        margin-top: calc(-1 * var(${BARS_VAR}, ${DEFAULT_BARS_HEIGHT}px)) !important;\n        padding-top: calc(${HERO_PADDING}px + var(${BARS_VAR}, ${DEFAULT_BARS_HEIGHT}px)) !important;\n    }\n    /* The pinned stage sits below the bars; a transparent bottom border of the\n       same size keeps its content inside the part of the screen still visible */\n    style[data-why-track] + * > :first-child {\n        top: var(${COVER_VAR}, ${DEFAULT_BARS_HEIGHT}px) !important;\n        border-bottom: var(${COVER_VAR}, ${DEFAULT_BARS_HEIGHT}px) solid transparent !important;\n        transition: top ${SLIDE_MS}ms ${EASE}, border-bottom-width ${SLIDE_MS}ms ${EASE};\n    }\n}\n/* On phones the header sits above the hero, so the hero fills what is left of\n   the first screen (on the canvas it is 100vh) */\n@media (max-width: ${OVERLAP_MIN_WIDTH-.02}px) {\n    style[data-auto-hide-header] + * {\n        min-height: calc(100vh - var(${BARS_VAR}, ${DEFAULT_BARS_HEIGHT}px)) !important;\n        min-height: calc(100svh - var(${BARS_VAR}, ${DEFAULT_BARS_HEIGHT}px)) !important;\n    }\n}\n@media (prefers-reduced-motion: reduce) {\n    style[data-why-track] + * > :first-child { transition: none; }\n}`;// Only applies once the header is being driven, so nothing moves before that\nconst pinCss=`\nhtml[${MODE_ATTRIBUTE}] style[data-header-pin] + * {\n    top: var(${COVER_VAR}, ${DEFAULT_BARS_HEIGHT}px) !important;\n    transition: top var(${SLIDE_VAR}, 0ms) ${EASE};\n}\nhtml[${MODE_ATTRIBUTE}=\"flow\"] style[data-why-track] + * > :first-child {\n    top: min(${WHY_STAGE_TOP}px, var(${COVER_VAR}, ${DEFAULT_BARS_HEIGHT}px)) !important;\n    transition: top var(${SLIDE_VAR}, 0ms) ${EASE};\n}`;// Several breakpoint copies of the frame can be mounted; only one drives the header\nlet owner=null;// The header, the phone menu bar and the banner: the sticky layers of the\n// layout template. The page itself is skipped. Breakpoint copies of a layer\n// can sit inside a wrapper that has no box of its own.\nfunction findStickyBars(marker){const template=marker.closest(\"[data-layout-template]\")??marker.parentElement;const bars=[];const collect=(parent,depth)=>{for(const child of Array.from(parent.children)){if(!(child instanceof HTMLElement)||child.hasAttribute(\"data-framer-root\"))continue;const style=getComputedStyle(child);if(style.position===\"sticky\")bars.push(child);else if(style.display===\"contents\"&&depth<3)collect(child,depth+1);}};if(template)collect(template,0);return bars;}export function withSiteAutoHide(Component){return function SiteAutoHide(props){const markerRef=useRef(null);useEffect(()=>{const marker=markerRef.current;if(!marker||owner)return;let bars=[];// Each bar's own inline styles, to put back on leaving\nconst previous=new Map;let lastScan=0;// Returns true when the set of bars changed\nconst scan=()=>{lastScan=performance.now();const found=findStickyBars(marker);if(found.length===bars.length&&found.every((bar,i)=>bar===bars[i]))return false;for(const bar of found){if(previous.has(bar))continue;previous.set(bar,[bar.style.transform,bar.style.transition]);bar.style.willChange=\"transform\";}bars=found;return true;};scan();if(bars.length===0)return;const token={};owner=token;const root=document.documentElement;const reduceMotion=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;// A bar's bottom edge while pinned; the copies for other breakpoints have no height\nconst pinnedBottom=bar=>bar.offsetHeight>0?(parseFloat(getComputedStyle(bar).top)||0)+bar.offsetHeight:0;// Only the page with a pulled-up hero has the header lying over its content\nconst overlaps=()=>window.innerWidth>=OVERLAP_MIN_WIDTH&&!!document.querySelector(\"style[data-auto-hide-header]\");const barsHeight=()=>Math.max(0,...bars.map(pinnedBottom));// Without a pulled-up hero \"away\" is the resting state: at the top of\n// the page the bars sit in their normal place and scrolling carries\n// them off with the page.\nlet away=!overlaps();let tracking=false;let lastY=window.scrollY;let anchorY=lastY// where the current scroll direction started\n;let frame=0;// Tell the CSS how tall the bars are (the banner can be off, or wrap)\nconst measure=()=>{const height=barsHeight();if(height>0)root.style.setProperty(BARS_VAR,`${Math.round(height)}px`);};const apply=animate=>{const y=Math.max(0,window.scrollY);const overlap=overlaps();let cover=0;for(const bar of bars){// Away: fully off the top. Without a pulled-up hero, near the\n// top of the page, only as far as the page has scrolled, so no\n// gap opens up.\nconst full=pinnedBottom(bar);const offset=!away?0:overlap?full:Math.min(y,full);cover=Math.max(cover,full-offset);bar.style.transition=animate&&!reduceMotion?SLIDE:\"none\";bar.style.transform=`translateY(${-Math.ceil(offset)}px)`;}root.setAttribute(MODE_ATTRIBUTE,overlap?\"overlap\":\"flow\");root.style.setProperty(SLIDE_VAR,`${animate&&!reduceMotion?SLIDE_MS:0}ms`);root.style.setProperty(COVER_VAR,`${Math.max(0,Math.floor(cover))}px`);};const setAway=next=>{if(next===away)return;away=next;apply(true);};const update=()=>{frame=0;if(performance.now()-lastScan>RESCAN_MS&&scan()){measure();apply(false);}const y=window.scrollY;const goingDown=y>lastY;const wasGoingDown=lastY>anchorY;if(goingDown!==wasGoingDown)anchorY=lastY;lastY=y;const overlap=overlaps();if(y<=TOP_ZONE)setAway(!overlap);else if(goingDown&&y-anchorY>HIDE_AFTER_DOWN)setAway(true);else if(!goingDown&&anchorY-y>SHOW_AFTER_UP)setAway(false);// While the top of the page is in view, the bars move exactly with\n// the scroll instead of sliding\nif(away&&!overlap){const nearTop=y<barsHeight();// One more update just past the top, so the bars end fully off screen\nif(nearTop||tracking)apply(false);tracking=nearTop;}};const onScroll=()=>{if(!frame)frame=window.requestAnimationFrame(update);};// Keyboard users tabbing into the header must be able to see it\nconst onFocus=event=>{if(bars.some(bar=>bar.contains(event.target)))setAway(false);};const onResize=()=>{measure();apply(false);onScroll();};// Moving to another page keeps the template and swaps what is in it:\n// the banner can appear or go, and so can a pulled-up hero. Without\n// this a pinned section would keep the old bars height until the\n// next scroll. Only the lists of children are watched, and the bars\n// are only restyled, so this cannot trigger itself.\nlet refreshFrame=0;const refresh=()=>{refreshFrame=0;if(scan())measure();if(window.scrollY<=TOP_ZONE)away=!overlaps();apply(false);};const observer=new MutationObserver(()=>{if(!refreshFrame)refreshFrame=window.requestAnimationFrame(refresh);});const template=marker.closest(\"[data-layout-template]\");if(template){observer.observe(template,{childList:true});const page=template.querySelector(\"[data-framer-root]\");if(page)observer.observe(page,{childList:true});}measure();apply(false);window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onResize);document.addEventListener(\"focusin\",onFocus);return()=>{window.cancelAnimationFrame(frame);window.cancelAnimationFrame(refreshFrame);observer.disconnect();window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onResize);document.removeEventListener(\"focusin\",onFocus);root.removeAttribute(MODE_ATTRIBUTE);root.style.removeProperty(BARS_VAR);root.style.removeProperty(COVER_VAR);root.style.removeProperty(SLIDE_VAR);previous.forEach(([transform,transition],bar)=>{bar.style.transform=transform;bar.style.transition=transition;bar.style.willChange=\"\";});if(owner===token)owner=null;};},[]);if(RenderTarget.current()===RenderTarget.canvas)return /*#__PURE__*/_jsx(Component,{...props});return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{ref:markerRef,\"data-site-auto-hide\":\"\",children:pinCss}),/*#__PURE__*/_jsx(Component,{...props})]});};}export function withHeaderPin(Component){return function HeaderPin(props){if(RenderTarget.current()===RenderTarget.canvas)return /*#__PURE__*/_jsx(Component,{...props});return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{\"data-header-pin\":\"\"}),/*#__PURE__*/_jsx(Component,{...props})]});};}export function withAutoHideHeader(Component){return function AutoHideHeader(props){if(RenderTarget.current()===RenderTarget.canvas)return /*#__PURE__*/_jsx(Component,{...props});return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{\"data-auto-hide-header\":\"\",children:overlapCss}),/*#__PURE__*/_jsx(Component,{...props})]});};}\nexport const __FramerMetadata__ = {\"exports\":{\"withHeaderPin\":{\"type\":\"reactHoc\",\"name\":\"withHeaderPin\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withAutoHideHeader\":{\"type\":\"reactHoc\",\"name\":\"withAutoHideHeader\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withSiteAutoHide\":{\"type\":\"reactHoc\",\"name\":\"withSiteAutoHide\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AutoHideHeader.map"],"mappings":"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"}