EnergyPathways

Default features description for sign up page.

<style>
  .epp-ticker__bar {
    position: fixed;
    top: 0;                /* set by the script to sit under the nav */
    left: 0;
    right: 0;
    width: 100%;
    /* The hub header is z-20. Staying below it lets the nav's dropdown
       menus open over the banner instead of behind it. */
    z-index: 10;
  }
  .epp-ticker__link {
    display: block;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
    background-color: #67A9BE;
  }
  .epp-ticker__link:hover { opacity: 0.9; }
  .epp-ticker__inner {
    display: flex;
    align-items: center;
    height: 48px;
    overflow: hidden;
    position: relative;
  }
  .epp-ticker__track {
    display: flex;
    width: max-content;
    animation: epp-scroll 60s linear infinite;
    will-change: transform;
  }
  .epp-ticker__item {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0 4rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #ffffff;
  }
  .epp-ticker__label { opacity: 0.9; }
  .epp-ticker__title {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  @keyframes epp-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @media (min-width: 768px) {
    .epp-ticker__inner { height: 56px; }
    .epp-ticker__item  { font-size: 0.95rem; padding: 0 8rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .epp-ticker__track {
      animation: none;
      width: 100%;
      justify-content: center;
      transform: none;
    }
    .epp-ticker__item:nth-child(n+2) { display: none; }
  }
  @media print {
    .epp-ticker__bar { display: none !important; }
  }
</style>

<script>
(function () {
  /* ---------- edit these if needed ---------- */
  var CFG = {
    href:  'https://luma.com/nck8dp3e',
    label: 'Register for our',
    title: 'Aberdeen Investor Event',
    navSelector: 'header',  // the hub's nav; auto-detect is used if not found
    navHeight: null         // e.g. 72 — only used if no nav is found at all
  };
  /* ----------------------------------------- */

  if (window.__eppTicker) return;   // never inject twice
  window.__eppTicker = true;

  function buildBar() {
    var bar = document.createElement('div');
    bar.className = 'epp-ticker__bar';

    var link = document.createElement('a');
    link.className = 'epp-ticker__link';
    link.href = CFG.href;
    link.target = '_blank';
    link.rel = 'noopener';
    link.setAttribute('aria-label', CFG.label + ' ' + CFG.title);

    var item = '<div class="epp-ticker__item font-heading">' +
                 '<span class="epp-ticker__label"></span>&nbsp;' +
                 '<span class="epp-ticker__title"></span>' +
               '</div>';
    // 5 items, then the same 5 again — the -50% keyframe makes the loop seamless
    link.innerHTML = '<div class="epp-ticker__inner"><div class="epp-ticker__track">' +
                     new Array(11).join(item) +
                     '</div></div>';

    Array.prototype.forEach.call(link.querySelectorAll('.epp-ticker__label'), function (el) {
      el.textContent = CFG.label;
    });
    Array.prototype.forEach.call(link.querySelectorAll('.epp-ticker__title'), function (el) {
      el.textContent = CFG.title;
    });

    bar.appendChild(link);
    return bar;
  }

  function findNav(bar) {
    if (CFG.navSelector) {
      var picked = document.querySelector(CFG.navSelector);
      if (picked) return picked;
    }
    var best = null;
    Array.prototype.forEach.call(document.body.querySelectorAll('header,nav,div'), function (el) {
      if (el === bar || bar.contains(el) || el.contains(bar)) return;
      var s = window.getComputedStyle(el);
      if (s.position !== 'fixed' && s.position !== 'sticky') return;
      if (parseFloat(s.top) !== 0) return;
      if (el.offsetWidth < window.innerWidth * 0.8) return;       // skip small floating widgets
      if (el.offsetHeight < 20 || el.offsetHeight > 200) return;  // skip slivers and overlays
      if (!best || el.contains(best)) best = el;                  // prefer the outermost bar
    });
    return best;
  }

  function init() {
    var bar = buildBar();
    // Appended to <body>, outside the app's render root, so it survives
    // client-side page changes without being re-injected.
    document.body.appendChild(bar);

    var nav = findNav(bar);

    // --- spacing --------------------------------------------------------
    // padTarget is the element we add the banner's height to. We record its
    // ORIGINAL top padding exactly once per element and never re-read it
    // afterwards — re-reading an element we had already padded was what
    // doubled the offset and left a white gap after a page change.
    var padTarget = null;
    var padBase = 0;

    function usePadTarget(el) {
      if (el === padTarget) return;
      if (padTarget) padTarget.style.paddingTop = '';   // undo ours before moving
      padTarget = el;
      padBase = parseFloat(window.getComputedStyle(el).paddingTop) || 0;
    }

    function pickPadTarget() {
      var inFlow = nav &&
        ['fixed', 'absolute'].indexOf(window.getComputedStyle(nav).position) === -1;
      // Nav in normal flow: make room after it. Nav out of flow (EPP's header
      // is position:fixed): the site already offsets content for it, so the
      // banner's height goes on <body>.
      usePadTarget(inFlow ? (nav.nextElementSibling || document.body) : document.body);
    }

    pickPadTarget();

    function place() {
      var h = bar.offsetHeight;
      // Follow the nav's bottom edge, so the banner tucks under a fixed or
      // sticky nav, tracks one that changes height, and rises to the top if
      // the nav scrolls away.
      var top = 0;
      if (nav) top = Math.max(0, nav.getBoundingClientRect().bottom);
      else if (CFG.navHeight != null) top = CFG.navHeight;

      bar.style.top = top + 'px';
      // Exactly the banner's own height on top of whatever the site already
      // had — the fixed banner covers this strip, so no white gap appears.
      var pad = (padBase + h) + 'px';
      if (padTarget.style.paddingTop !== pad) padTarget.style.paddingTop = pad;
    }

    var queued = false;
    function schedule() {
      if (queued) return;
      queued = true;
      window.requestAnimationFrame(function () { queued = false; place(); });
    }

    place();
    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule);
    if (window.ResizeObserver) {
      var ro = new window.ResizeObserver(schedule);
      ro.observe(bar);
      if (nav) ro.observe(nav);
    }
    // Re-attach if the app re-renders and drops the bar, or swaps the nav out.
    if (window.MutationObserver) {
      var t;
      new window.MutationObserver(function () {
        clearTimeout(t);
        t = setTimeout(function () {
          if (!document.body.contains(bar)) document.body.appendChild(bar);
          if (!nav || !document.body.contains(nav)) {
            nav = findNav(bar);
            pickPadTarget();   // no-op when the target element is unchanged
          }
          place();
        }, 250);
      }).observe(document.body, { childList: true, subtree: true });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

EnergyPathways PLC - Intellectual Property Patent Application