Light the Stream

see it in action on : https://netmwd.specialdistrict.org/#/

Add to advanced > before </head>

<script>
(function () {
  // Find the first wave path, even if the hero renders a bit later
  function styleFirstWave() {
    var svg = document.querySelector('.wave-svg.wave-bottom');
    if (!svg) return false;
    var p = svg.querySelector('path');
    if (!p) return false;

    // Navy fill for the body of the wave (adjust if needed)
    p.setAttribute('fill', '#162B5C');

    // Draw the red ribbon right on the wave’s top curve
    p.setAttribute('stroke', '#E24A3E');           // client red
    p.setAttribute('stroke-width', '18');          // thickness (desktop)
    p.setAttribute('stroke-linecap', 'round');
    p.setAttribute('stroke-linejoin', 'round');

    // Keeps thickness consistent as the SVG scales
    p.setAttribute('vector-effect', 'non-scaling-stroke');

    // Ensure stroke renders *above* the fill
    p.style.paintOrder = 'stroke fill';

    // Optional: make the little dark ridge subtler
    svg.style.filter = 'drop-shadow(0 1px 0 rgba(0,0,0,.15))';

    return true;
  }

  // Try immediately; if not present yet, observe until it is
  if (!styleFirstWave()) {
    var mo = new MutationObserver(function () {
      if (styleFirstWave()) mo.disconnect();
    });
    mo.observe(document.documentElement, { childList: true, subtree: true });
    // Safety timeout so we don't observe forever
    setTimeout(function(){ mo.disconnect(); }, 8000);
  }
})();
</script>

<style>
.amplify-quicklinks-container .container header:hover {
    transform: scale(1.1);
transition: transform 0.3s ease;
}
.amplify-media-banner-container .overlay-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    color: #fff;
    z-index: 1;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 4rem 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 20.85%, #012868 100%) !important;
}
/* Mobile override: square 4rem */
@media (max-width: 768px) {
  .amplify-quicklinks-container .container header img {
    width: 4rem;
    height: 4rem;
    max-width: 4rem;
    max-height: 4rem;
  }
}
.amplify-header .container h1 img {
    height: auto;
    width: 600px; /*default for desktop*/
    padding: 0px;
}

@media (max-width: 64rem) {
  .amplify-header .container h1 img {
    height: auto;
    width: 150px; /* smaller logo on mobile */
    padding: 10px 0;
  }

}

</style>