Embed

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Mulish:wght@300;400;600&display=swap" rel="stylesheet">


<div id="rjp-hero" style="
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  position: relative;
  box-sizing: border-box;
">
  <div style="
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
  ">
    
    <div style="
      margin-bottom: 40px;
      position: relative;
    ">
      
      <h1 style="
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 500;
        color: transparent;
        line-height: 1.4;
        margin: 0;
        letter-spacing: 0.02em;
        visibility: hidden;
        pointer-events: none;
        white-space: normal;
        word-break: keep-all;
        word-wrap: normal;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 30px;
      " aria-hidden="true">
        IN CASE OF EMERGENCY BOX PROJECT
      </h1>
      
      
      <h1 style="
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 500;
        color: #ffffff;
        line-height: 1.4;
        margin: 0 auto;
        letter-spacing: 0.02em;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        white-space: normal;
        word-break: keep-all;
        word-wrap: normal;
        max-width: 100%;
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
      ">
        <span id="rjp-typed" style="
          display: inline;
          position: relative;
        "></span>
      </h1>
    </div>
    
    
    <div style="
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50px;
      padding: 12px 24px;
      margin-bottom: 30px;
      opacity: 0;
      transform: translateY(10px);
      animation: rjpFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      animation-delay: 2.3s;
    ">
      <span style="
        font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: clamp(0.95rem, 2vw, 1.1rem);
        font-weight: 600;
        color: #ffffff;
      ">Friday, October 24</span>
      <span style="
        color: rgba(255, 255, 255, 0.5);
        font-size: clamp(0.9rem, 1.8vw, 1rem);
      ">•</span>
      <span style="
        font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: clamp(0.95rem, 2vw, 1.1rem);
        color: rgba(255, 255, 255, 0.9);
      ">12pm - 2pm</span>
    </div>
    
    
    <p style="
      font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: clamp(1.125rem, 3vw, 1.35rem);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.6;
      margin: 0 auto 25px;
      max-width: 700px;
      opacity: 0;
      transform: translateY(10px);
      animation: rjpFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      animation-delay: 1.8s;
    ">
      Join RJP Estate Planning & A New Leaf for a special collaborative event to help you organize your most important documents and be prepared for life's emergencies.
    </p>
    
    
    <p style="
      font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: clamp(1rem, 2.5vw, 1.15rem);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
      margin: 0 auto 45px;
      opacity: 0;
      transform: translateY(10px);
      animation: rjpFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      animation-delay: 2s;
    ">
      Apache Wells Country Club (Pima Room)<br>
      <span style="
        font-size: clamp(0.95rem, 2.3vw, 1.05rem);
        color: rgba(255, 255, 255, 0.75);
        font-weight: 400;
      ">2233 N 56th St, Mesa, AZ 85215</span>
    </p>
    
    
    <div style="
      display: flex;
      gap: 24px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(10px);
      animation: rjpFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      animation-delay: 2.5s;
    ">
      <a id="rjp-register-btn" href="https://rjpestateplanning.typeform.com/to/jCxqNzl4?venue=Apache%20Wells&eventdate=Oct%2024%2012%3A00%20PM&campaign=2580346000205375033&address=5601%20E%20Hermosa%20Vista%20Drive%20Mesa%20AZ%2085215" style="
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 20px 40px;
        font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: clamp(1rem, 2.5vw, 1.1rem);
        font-weight: 700;
        text-decoration: none;
        border-radius: 50px;
        min-width: 240px;
        text-align: center;
        background: #ffffff;
        color: #1e3a8a;
        border: 2px solid transparent;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      " onmouseover="this.style.transform='translateY(-2px) scale(1.02)'; this.style.boxShadow='0 12px 24px rgba(255, 255, 255, 0.3)';" 
         onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='none';">
        Register for Event
      </a>
      
      <a href="tel:4803463572" style="
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 20px 40px;
        font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: clamp(1rem, 2.5vw, 1.1rem);
        font-weight: 600;
        text-decoration: none;
        border-radius: 50px;
        min-width: 240px;
        text-align: center;
        background: transparent;
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.9);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      " onmouseover="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.borderColor='#ffffff'; this.style.transform='translateY(-2px) scale(1.02)'; this.style.boxShadow='0 12px 24px rgba(255, 255, 255, 0.15)';" 
         onmouseout="this.style.background='transparent'; this.style.borderColor='rgba(255, 255, 255, 0.9)'; this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='none';">
        Call to RSVP: (480) 346-3572
      </a>
    </div>
    
    
    <div style="
      margin-top: 60px;
      padding: 30px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      max-width: 750px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      transform: translateY(10px);
      animation: rjpFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      animation-delay: 2.8s;
    ">
      <h2 style="
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(1.25rem, 3vw, 1.5rem);
        font-weight: 500;
        color: #ffffff;
        margin: 0 0 15px 0;
      ">What is an ICE Box?</h2>
      <p style="
        font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: clamp(0.95rem, 2.3vw, 1.05rem);
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.6;
        margin: 0;
        text-align: left;
      ">
        An ICE Box is a special "in case of emergency" file box that holds all your crucial documents in one place. It's where you can keep things like insurance policies, medical records, and other important papers, so they're easy to find when you need them most. Having an ICE Box helps you feel prepared and protected, so you can handle any crisis with confidence.
      </p>
      <p style="
        font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: clamp(0.95rem, 2.3vw, 1.05rem);
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.6;
        margin: 20px 0 0 0;
        text-align: left;
      ">
        At our event, we'll rotate you through stations on financial planning, estate planning, healthcare, and more, where you'll gain practical tips and stories that highlight the importance of being prepared.
      </p>
    </div>
  </div>
</div>


<style>
@keyframes rjpBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes rjpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Character animation styles */
.rjp-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 3px, 0);
  will-change: transform, opacity;
  transition: none;
}

.rjp-char-animating {
  animation: rjpCharReveal 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes rjpCharReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 3px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Space character should maintain width */
.rjp-char-space {
  width: 0.3em;
  display: inline-block;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  #rjp-hero > div > div:nth-child(6) {
    flex-direction: column !important;
  }
  
  #rjp-hero a {
    width: 100% !important;
    max-width: 300px !important;
  }
  
  /* Allow controlled line break on tablets */
  #rjp-hero h1 {
    white-space: normal !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    font-size: clamp(1.75rem, 4.5vw, 3rem) !important;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  #rjp-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    padding: 0 15px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    hyphens: none !important;
    line-height: 1.35 !important;
  }
  
  /* Make description text smaller for better contrast with title */
  #rjp-hero p {
    font-size: clamp(0.95rem, 2.5vw, 1.125rem) !important;
    line-height: 1.5 !important;
    padding: 0 15px !important;
  }
  
  /* Optimize button sizing on mobile */
  #rjp-hero a {
    padding: 18px 30px !important;
    font-size: clamp(0.95rem, 2vw, 1rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Ensure proper spacing for wrapped text */
  .rjp-char-space {
    width: 0.25em !important;
  }
}
</style>


<script>
(function() {
  // Dynamic UTM Parameter Capture and Append
  function updateRegistrationLink() {
    const registerBtn = document.getElementById('rjp-register-btn');
    if (!registerBtn) return;
    
    // Get current page URL parameters
    const currentParams = new URLSearchParams(window.location.search);
    
    // Parse existing Typeform URL
    const btnUrl = new URL(registerBtn.href);
    const btnParams = new URLSearchParams(btnUrl.search);
    
    // List of parameters that can be filled from current URL
    const fillableParams = [
      'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
      'gclid', 'dayofweek', 'form_trigger_url', 'msclkid', 'fbclid'
    ];
    
    // Update or add parameters from current URL
    fillableParams.forEach(param => {
      // Check if current URL has this parameter
      if (currentParams.has(param)) {
        // Update the button URL with the current page's value
        btnParams.set(param, currentParams.get(param));
      } else if (!btnParams.has(param) || btnParams.get(param) === 'xxxxx') {
        // Set default values for empty or placeholder parameters
        switch(param) {
          case 'utm_source':
            btnParams.set(param, 'website');
            break;
          case 'utm_medium':
            btnParams.set(param, 'hero');
            break;
          case 'utm_campaign':
            btnParams.set(param, 'icebox-event');
            break;
          case 'utm_term':
            btnParams.set(param, 'october-2024');
            break;
          case 'utm_content':
            btnParams.set(param, 'hero-section');
            break;
          case 'dayofweek':
            btnParams.set(param, 'Friday');
            break;
          case 'form_trigger_url':
            btnParams.set(param, encodeURIComponent(window.location.href));
            break;
          // Leave gclid, msclkid, fbclid empty if not present
          default:
            if (btnParams.get(param) === 'xxxxx') {
              btnParams.delete(param);
            }
        }
      }
    });
    
    // Update the button href with all parameters
    btnUrl.search = btnParams.toString();
    registerBtn.href = btnUrl.toString();
  }
  
  // Call immediately to update link
  updateRegistrationLink();
  
  // Also update if URL changes (for SPAs)
  window.addEventListener('popstate', updateRegistrationLink);
  
  // Typing Animation Code
  const text = "IN CASE OF EMERGENCY BOX PROJECT";
  const element = document.getElementById('rjp-typed');
  
  if (!element) return;
  
  // Create cursor element
  const cursor = document.createElement('span');
  cursor.id = 'rjp-cursor';
  cursor.style.cssText = `
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: #ffffff;
    margin-left: 4px;
    vertical-align: text-bottom;
    opacity: 1;
    animation: rjpBlink 1.2s ease-in-out infinite;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate3d(0, 0, 0);
  `;
  
  // Split text into words and create word spans to prevent mid-word breaks
  const words = text.split(' ');
  const chars = [];
  const wordSpans = [];
  
  words.forEach((word, wordIndex) => {
    // Create a span for each word to keep letters together
    const wordSpan = document.createElement('span');
    wordSpan.style.cssText = `
      display: inline-block;
      white-space: nowrap;
    `;
    
    // Add characters for this word
    for (let i = 0; i < word.length; i++) {
      const span = document.createElement('span');
      span.className = 'rjp-char';
      span.textContent = word[i];
      
      // Apply GPU acceleration
      span.style.transform = 'translate3d(0, 3px, 0)';
      span.style.opacity = '0';
      span.style.display = 'inline-block';
      
      wordSpan.appendChild(span);
      chars.push(span);
    }
    
    element.appendChild(wordSpan);
    wordSpans.push(wordSpan);
    
    // Add space between words (except after last word)
    if (wordIndex < words.length - 1) {
      const spaceSpan = document.createElement('span');
      spaceSpan.innerHTML = '&nbsp;';
      spaceSpan.className = 'rjp-char rjp-char-space';
      spaceSpan.style.opacity = '0';
      element.appendChild(spaceSpan);
      chars.push(spaceSpan);
    }
  });
  
  // Insert cursor at the beginning (before first word)
  if (wordSpans.length > 0) {
    element.insertBefore(cursor, wordSpans[0]);
  } else {
    element.appendChild(cursor);
  }
  
  // Time-based animation using timestamps for consistent speed
  let startTime = null;
  let currentCharIndex = 0;
  const charDelay = 55; // 55ms per character for smooth flow
  let animationActive = true;
  let animationFrame = null;
  
  function moveCursor(afterChar) {
    // Move cursor after the specified character
    if (afterChar && afterChar.parentNode) {
      // Check if this is a space character
      if (afterChar.classList.contains('rjp-char-space')) {
        // Space is at root level, insert cursor after it
        afterChar.parentNode.insertBefore(cursor, afterChar.nextSibling);
      } else {
        // Character is inside a word span
        const wordSpan = afterChar.parentNode;
        const nextChar = afterChar.nextSibling;
        
        if (nextChar) {
          // More characters in this word, insert cursor within word
          wordSpan.insertBefore(cursor, nextChar);
        } else {
          // Last character of word, insert cursor after this character but within word
          wordSpan.appendChild(cursor);
        }
      }
    }
  }
  
  function animate(timestamp) {
    if (!animationActive) {
      cleanup();
      return;
    }
    
    if (!startTime) startTime = timestamp;
    
    const elapsed = timestamp - startTime;
    const targetChar = Math.floor(elapsed / charDelay);
    
    // Animate characters that should be visible by now
    while (currentCharIndex <= targetChar && currentCharIndex < chars.length) {
      const char = chars[currentCharIndex];
      
      // Enable will-change just before animation
      char.style.willChange = 'transform, opacity';
      
      // Trigger the animation
      requestAnimationFrame(() => {
        char.style.opacity = '1';
        char.style.transform = 'translate3d(0, 0, 0)';
        char.style.transition = 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
        
        // Move cursor after this character
        moveCursor(char);
        
        // Clean up will-change after animation
        setTimeout(() => {
          if (char) {
            char.style.willChange = 'auto';
          }
        }, 400);
      });
      
      currentCharIndex++;
    }
    
    // Continue animation or finish
    if (currentCharIndex < chars.length) {
      animationFrame = requestAnimationFrame(animate);
    } else {
      // Animation complete - stop cursor and clean up
      setTimeout(() => {
        cursor.style.animation = 'none';
        setTimeout(() => {
          cursor.style.opacity = '0';
        }, 200);
        cleanup();
      }, 100);
    }
  }
  
  function cleanup() {
    animationActive = false;
    if (animationFrame) {
      cancelAnimationFrame(animationFrame);
      animationFrame = null;
    }
    
    // Clean up all will-change properties
    chars.forEach(char => {
      if (char) {
        char.style.willChange = 'auto';
      }
    });
  }
  
  // Start animation after a short delay
  setTimeout(() => {
    if (animationActive) {
      animationFrame = requestAnimationFrame(animate);
    }
  }, 500);
  
  // Cleanup on page unload
  window.addEventListener('beforeunload', cleanup);
})();
</script>