Hi,
By default, the Service site template adds a custom CSS that styles the page hero’s gradient through a .gradient-overlay class.
On your site’s Dashboard > Appearance > Customize > Additional CSS, you should be able to find a CSS code that looks something like this:
/* page header gradient overlay */
.gradient-overlay {
position: relative;
}
.gradient-overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(135deg, rgba(24,106,178,0.9) 20%, rgba(0,175,229,0.9) 80%);
}
.gradient-overlay .inside-page-hero {
z-index: 1;
position: relative;
}
Change the value of this line to the color of your preference.
background: linear-gradient(135deg, rgba(24,106,178,0.9) 20%, rgba(0,175,229,0.9) 80%);