Focus link styles differing local/server for child theme

My local copy of the website has a black background when you focus on links and icons by tabbing, both the child theme and the parent version. When I uploaded the child theme to the server it had white background instead. I first thought it was something with the parent theme settings (perhaps it was in dark mode) so I activated the parent theme but it shows black backgrounds on link and icons when you focus on them. I made sure to activate a light background in the parent theme just in case. Then I reactivated the child theme but no change.

On the local version it looks like this if you inspect via Google Chrome:

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background: rgba(0, 0, 0, 0.9);
    color: var(--wp--style--color--link, var(--global--color-white));
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    outline: 2px solid transparent;
    text-decoration: underline 1px dotted currentColor;
    text-decoration-skip-ink: none;
    background: rgba(255, 255, 255, 0.9); <---this is crossed over
}

on the server version it looks like this

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    outline: 2px solid transparent;
    text-decoration: underline 1px dotted currentColor;
    text-decoration-skip-ink: none;
    background: rgba(255, 255, 255, 0.9);
}

Does it have something to do with dark/light mode? Or could it be something else? I would like the links and the icons to have a black background when someone focuses on them. Any suggestions welcome.

The theme version is 1.3.

• This topic was modified 4 years, 11 months ago by mipodi.

The page I need help with: [log in to see the link]