brine-template CSS to edit "earlier event" / "later event" text on event page Brine template 7.0

Site URL: https://harmonica-silver-l6sn.squarespace.com/diary/le-nozze-di-figaro-mozart-glyndebourne

Hello! 

I'm working in Brine template (Squarespace 7.0) 

Link: https://harmonica-silver-l6sn.squarespace.com/diary/le-nozze-di-figaro-mozart-glyndebourne

Password: lottie 

I have two requests: 

1) My client wants me to remove the text "earlier event" and "later event" and just have dates. Does anyone know any CSS that could do that? I would be very appreciative! See image below. 

2) My client wants the sources for the quotes to be pink. My hex code for this is #FF23FF. See screenshot for what I mean (OPERA MAGAZINE to be #FF23FF). Does anyone have any CSS for this that would work in the Brine template? Thank you so much in advance. (See screenshot below)

Many thanks! 

Poppy 

#2. Can you share link to a page where we can see quote?

#1. Add to Diary Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".eventitem-pager-date").html(function() { 
          return $(this).html().replace("Earlier Event:", "");  
    });
    $(".eventitem-pager-date").html(function() { 
          return $(this).html().replace("Later Event:", "");  
    });
});
</script>

Thank you so much! That is so helpful. I have sorted the colour for the quote source now. 

My client is on the personal plan and doesn't want to pay for the business plan (which we need for the header injection). Instead of removing the text, do you know any CSS to make just the text "earlier event" and "later event" pink (hex code: #FA31FA)?

Many thanks in advance! 

Poppy

Text - Date in same tag, so there is no way to target text only.

Try adding to Design > Custom CSS

/* testing code */
.eventitem-pager>div {
    overflow: hidden;
}
.eventitem-pager-older .eventitem-pager-date {
    margin-left: -125px;
}
.eventitem-page-newer .eventitem-pager-date {
    transform: rotate(88deg);
    display: block;
}
.eventitem-pager-newer .eventitem-pager-date {
    text-align: left;
    margin-left: -125px;
}
@media screen and (max-width:640px) {
.eventitem-pager-older .eventitem-pager-date {
    margin-left: -100px;
}
.eventitem-pager-newer .eventitem-pager-date {
    margin-left: -90px;
}}