adifederico

Looks like the blue your looking for is: hsl(208, 42%, 30%). So you can write the code like this to get that blue.
.header .header-announcement-bar-wrapper:hover {
    background-color:  hsl(208, 42%, 30%); /*can change this to any color*/
}

Give this code a try. You can change the color hex to whatever color you want. Same with size. You can up the rem if you want.
.eventitem-title {
    color: #515151 !important;
}
.eventitem-meta-item {
    font-size: 1.2rem;
}

I have finally found a solution. I used this code here:
<script> 
   $(document).ready(function() { 
     $('#block-yui_3_17_2_1_1665162425531_150044').attr("href", "https://info.keystorage.com/s/PKJLgJMExM3M9yW");
     window.addEventListener('load', function(){
       document.querySelector('[href="https://info.keystorage.com/s/PKJLgJMExM3M9yW"]').addEventListener('click', function() {
         window.location = "https://info.keystorage.com/s/PKJLgJMExM3M9yW";
       })
     })
   }); 
</script>
 
I found it here (https://www.therapistsitetoolbox.com/blog/redirect-a-folder-click-squarespace) and tweaked it a bit. I placed code in advanced code injection and it worked.

Give this code a try.   .image-overlay {
    background-color: rgba(255, 255, 255, 0) !important;
}

Give this a try. This will add padding to the top and bottom of the name. If you wish to increase the space just up the 10px.
div.healcode.appointments .trainer-label {
    padding: 10px 0;
}