Squarespace Navigation & Link Guide

To bring the "Screen Meets Soul" vision to life, follow these three steps to set up your navigation properly.

1. Creating the Pages (The "Soul")

Before you can link anything, the pages must exist in your sidebar.

1. Log into Squarespace and go to Website > Pages.

2. Click the + icon next to "Main Navigation."

3. Create four "Blank Pages" and name them exactly as we discussed:

   • THE ORIGIN (Your story)

   • THE ARCHIVE (The lore/world)

   • THE SANCTUARY (AVEIT/Charity)

   • THE PORTAL (Shop/Enter)

2. Linking the "Header Button" (The "Screen")

Most Squarespace templates have a "Call to Action" button in the top right.

1. Click Edit on any page.

2. Hover over the Header and click Edit Site Header.

3. Click Elements.

4. Toggle Button to "On."

5. How to Link it:

   • Under Text, type: ENTER LUMIIN

   • Under Link, click the Gear Icon.

   • Select Page from the left menu.

   • Search for and select THE PORTAL.

   • Click Save.

3. Fixing the CSS Styling

If the previous code didn't work, it's likely because Squarespace uses specific "Class Names" for buttons that change based on the template. Use this updated, more aggressive code in Website > Website Tools > Custom CSS.

/* 1. THE LUMIIN CURSOR */
/* This replaces your mouse with an emerald glow */
body, a, button {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="%2310b981" fill-opacity="0.6" stroke="white" stroke-width="1"/></svg>') 8 8, auto !important;
}

/* 2. NAVIGATION LINKS FONT */
/* Makes your menu items look tech-driven */
.header-nav-item a {
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  transition: color 0.3s ease;
}

.header-nav-item a:hover {
  color: #10b981 !important; /* Turns emerald on hover */
}

/* 3. THE GLOWING HEADER BUTTON */
/* This targets the main action button in your header */
.header-actions-action--btn .btn {
  background-color: transparent !important;
  border: 1px solid #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
  transition: all 0.4s ease-in-out !important;
}

.header-actions-action--btn .btn:hover {
  background-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6) !important;
}

/* 4. SMOOTH PAGE FLOW */
html {
  scroll-behavior: smooth;
}

Troubleshooting

• Code not working? Make sure you are using a Squarespace 7.1 template (the modern version).

• Button didn't change color? In the Custom CSS panel, if you see a red error message, it means there is a typo in the brackets { }.

• Linking to external sites: If you want "The Sanctuary" to link directly to the AVEIT website, choose URL instead of Page in the Link Editor and paste their web address.