Custom CSS is accessed via Websites → Pages → Scroll to Bottom → Custom Code → Custom CSS
CSS changes appearance only — not functionality; for behavior changes you need JavaScript, etc.
Color variables are set at the top of the CSS — changing accent, black, or white here updates everything coded to those variables automatically

What the custom CSS does, section by section:

Navigation — hover colors change to accent; underlines removed; dropdown left-aligned; folder nav gets rounded corners
Mobile menu — text made slightly smaller; menu position moved up for cleaner look
Text styles — text wrapping/balance added; link underlines removed in favor of color hover; accordion block padding fixed to use full width; no hyphenation on mobile
Buttons — primary hovers to black; secondary hovers to accent; tertiary is native Squarespace (no CSS needed)
Text links — turn accent color on hover, then go to black
Announcement bar — link hover styled to match the rest of the site
Social icons — hover effect changes icon to black with accent fill (header and body handled separately)
Mini cart popup — restyled because Squarespace's default looks bad
Gallery reel/carousel — spacing added between images (Squarespace doesn't include this natively); mobile gallery shows full height instead of cropped
Event page — all click-through links disabled so you don't have to format a full page per event
Blog — archive/category box styled with accent color hover; mobile layout adjusted

⚠️ Changing the CSS code will disable some of the styles your template was set up to do. Once saved you cannot go back.

❗ A reference file with all the code (and descriptions of what each section does) is included so you can restore anything you accidentally delete

⭐ You can add your own CSS if you know how — the template's code is a starting point, not a limit

⚠️ This PDF is a guide to all the CSS Code in the Foundry Template.

⚠️ If you need to replace your CSS Code, this is the text file you can copy.

Template CSS

Ready to work together?