Square_Ace

Hi, I don't know of a fix for this. Safari sometimes acts differently - it's not as easy to code for as Chrome.
I think there's a simpler way to do this though. If you want all text links in your 'Lightest 1' palette sections (i.e with white background) to have black text and a blue underline, then remove the black text color you added to the links first. You can do this by selecting them and clicking on the color button where you added it in the first place and clicking the black colour again (this should toggle it off). This will make your links blue again as this is the default color.
Now go to your color palette editor and edit the Lightest 1 palette. Scroll down to the Links colors and change text links to black. Your links will now be black with blue underlines.
Now in your custom CSS remove the code I previously gave you:
span[class^="sqsrte-text-color--"] { text-decoration: none } Your existing custom CSS specifies that links should have a blue underline, so keep that, and it should function as you want it to.
 

Hi, I'm suggesting this from memory but I think as this is a blog page, if you edit the blog section (use the section menu that appears on the top right of the section where you can change background colour etc), you can turn off the metadata delimiters.
If I'm wrong and you can't, you can use this custom CSS:
.blog-categories--comma { display: none } Hope that helps.

Hi you need to use 100svh like this:
#siteWrapper { display: flex; flex-direction: column; min-height: ~'100svh'; }  

Hi yes, you need to add this code:
#siteWrapper #header .header-actions-action--cta .sqs-button-element--primary { font-size: 20px; padding: 20px; } Change the pixel values as you wish.  If you want the padding to have different vertical/horizontal padding then use padding: 10px 20px; which will make the padding 10px top and bottom and 20px on the sides.
This is a simplified way of doing this. A more complex solution would use different sizes for different screen sizes and a dynamic font size rather than a fixed pixel value.
Hope that helps.
Andrew
Square Ace

Hi, try adding this code in your code injection header:
<style> #header[data-section-theme="bright-inverse"]:not(.shrink) { --navigationLinkColor: #fff; } </style> This will work when the first section colour palette is what you have your homepage set to (I think it's Bright 1, might be Bright 2).
It can't go in the Custom CSS because it doesn't like CSS variables with capitals, but that's how Squarespace sets it.
If you want to animate the transition, this will work just for the nav links and can be added to the Custom CSS. You'll need to modify it if you want it to work for more than the nav links or if you add a site-wide Squarespace animation:
.header-nav-item a { transition: color 0.4s; } Your logo will still be black. This could be fixed if you used an SVG for the logo because you can control the colour of SVGs with CSS. You'd need some javascript to replace the logo <img> with an <svg> element.
Hope that helps.
Andrew
Square Ace