Add another color to the amplify homepage wave swoosh (first instance only)
see it in action on : https://netmwd.specialdistrict.org/#/
Add to advanced > before </head>
<script>
(function () {
function styleFirstWave() {
var svg = document.querySelector(‘.wave-svg.wave-bottom’);
if (!svg) return false;
var base = svg.querySelector(‘path’);
if (!base) return false;
// Base wave: fill only (prevents green stroke outlining the bottom)
base.setAttribute(‘fill’, ‘#162B5C’);
base.setAttribute(‘stroke’, ‘none’);
// Remove any previous injected stroke/mask (safe rerun)
var oldStroke = svg.querySelector(‘path[data-wave-stroke=“1”]‘);
if (oldStroke) oldStroke.remove();
var oldMask = svg.querySelector(‘#waveStrokeMask’);
if (oldMask) oldMask.remove();
// Ensure defs exists
var defs = svg.querySelector(‘defs’);
if (!defs) {
defs = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘defs’);
svg.insertBefore(defs, svg.firstChild);
}
// Stroke clone
var strokePath = base.cloneNode(true);
strokePath.setAttribute(‘fill’, ‘none’);
strokePath.setAttribute(‘stroke’, ‘#B2D237’);
strokePath.setAttribute(‘stroke-width’, ‘14’);
strokePath.setAttribute(‘stroke-linecap’, ‘round’);
strokePath.setAttribute(‘stroke-linejoin’, ‘round’);
strokePath.setAttribute(‘vector-effect’, ‘non-scaling-stroke’);
strokePath.style.paintOrder = ‘stroke fill’;
strokePath.setAttribute(‘data-wave-stroke’, ‘1’);
// Mask out ONLY the bottom 1px of the stroke (keeps the dip aligned)
var bb = base.getBBox();
var CUT_PX = 1;
var mask = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘mask’);
mask.setAttribute(‘id’, ‘waveStrokeMask’);
mask.setAttribute(‘maskUnits’, ‘userSpaceOnUse’);
var keepRect = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘rect’);
keepRect.setAttribute(‘x’, bb.x);
keepRect.setAttribute(‘y’, bb.y);
keepRect.setAttribute(‘width’, bb.width);
keepRect.setAttribute(‘height’, Math.max(0, bb.height - CUT_PX));
keepRect.setAttribute(‘fill’, ‘white’);
var hideRect = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘rect’);
hideRect.setAttribute(‘x’, bb.x);
hideRect.setAttribute(‘y’, bb.y + Math.max(0, bb.height - CUT_PX));
hideRect.setAttribute(‘width’, bb.width);
hideRect.setAttribute(‘height’, CUT_PX);
hideRect.setAttribute(‘fill’, ‘black’);
mask.appendChild(keepRect);
mask.appendChild(hideRect);
defs.appendChild(mask);
strokePath.setAttribute(‘mask’, ‘url(#waveStrokeMask)’);
// Put stroke above fill
base.parentNode.appendChild(strokePath);
return true;
}
if (!styleFirstWave()) {
var mo = new MutationObserver(function () {
if (styleFirstWave()) mo.disconnect();
});
mo.observe(document.documentElement, { childList: true, subtree: true });
setTimeout(function(){ mo.disconnect(); }, 8000);
}
})();
</script>
<style>
/* === Final seam handling with ZERO color above the wave === */
.wave-svg.wave-bottom{
display:block;
line-height:0;
/* keep SVG transparent everywhere... */
background-color: transparent;
/* ...but paint ONLY the bottom strip to blend any seam */
background-image: linear-gradient(#813A8D, #813A8D);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 100% 2px;
/* tiny overlap so no seam can peek through */
margin-bottom:-1px;
}
/* Your existing hover effect */
.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 */
@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;
padding: 0px;
}
@media (max-width: 64rem) {
.amplify-header .container h1 img {
height: auto;
width: 150px;
padding: 10px 0;
}
}
</style>
<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';
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>
