Keyboard focus rings are not fully visible in landing page header in Chrome

Describe the bug

When navigating the page using the keyboard it is not possible to see if a link is highlighted in the header section. This is dependent on screen resolution and zoom level and at least affects the Chrome browser. Chrome appears to use a black ring with a white border for the focus ring. This is similar to the existing styles on the links in the header and makes the focus ring difficult to detect visually.

To Reproduce

Steps to reproduce the behavior:

Using Chrome, Go to the Together landing page at https://together.cyclic.app/ (If you are redirected to the calendar view, click the Home button in the top left to go back to the landing page.)
Click on the URL bar in your browser.
Press the tab key repeatedly to cycle through all the site links.
Notice that the top buttons never appear to have a visible focus ring but the other links do.

Expected behavior

Links should have a visible focus ring for accessibility.

Screenshots

Above 100% zoom, there is a barely perceptible white ring around the home button in this screenshot At 75% zoom, there is a more pronounced black ring on the home button but it is still difficult to see.

Which Branch should this fix be Pulled into?

PR into main

Device Information

Desktop (please complete the following information):

OS: Windows 11
Browser: Chrome
Version: 114.0.5735.199 (Official Build) (64-bit) Tested on my machine but likely affects all devices.

Additional context

The focus ring for these links could be changed to a more contrasting color or larger size but this change should still be tested on additional browsers before closing the issue.

If you're interested in working on this feature, please comment so you can be assigned

Together-100Devs / Together