CSS
/* General */
/* HEADER */
body.homepage header#header {
position: relative !important;
}
body.sqs-edit-mode-active header#header {
position: absolute !important;
}
/* announcement bar */
/* disable close icon in announcement bar */
span.sqs-announcement-bar-close {
display: none;
}
/* custom burger */
#siteWrapper div.header-burger {
display: none !important;
}
.custom-burger-trigger {
position: fixed;
top: 20px;
right: 20px;
z-index: 99999999;
border: 1px solid;
padding: 2px;
color: var(--announcement-bar-background-color);
cursor: pointer;
}
[data-target="/burger"] {
.section-border:before {
display: none;
}
& {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
transform: translateX(-100vw);
transition: all 1.5s ease;
}
section[id*="split"] {
margin: 0vw;
height: 100vh;
}}
body.open-custom-burger {
.custom-burger-trigger {
font-size: 0;
}
.custom-burger-trigger:before {
content: attr(data-close);
font-size: 16px;
}
[data-target="/burger"] {
transform: translateX(0);
transition: all 1.5s ease;
}
& {
overflow: hidden;
}}
div.header-display-mobile .header-title {
text-align: center !important;
}
/* END HEADER */
/* HERO IMAGE with ARROW and TEXT */
/* Hero banner - arrow */
section[id*="-hero"] {
.html-block {
justify-content: flex-end;
}
h3 {
display: flex;
align-items: center;
flex-direction: column;
}
h3:after {
content: "\2192";
display: block;
transform: rotate(90deg);
color: ~"hsl(var(--white-hsl))";
width: 30px;
}
@media screen and (max-width:767px) {
& {
height: 95vh !important;
}
h3 {
margin-top: 0px !important;
}
}
}
/* END Hero code */
/* OUTLINE */
section[id*="outline"], section[id*="timelinev1"] {
.content {
padding: 10px !important;
}
.section-border:before {
content: "";
position: absolute;
z-index: 999;
top: 0vw !important;
bottom: 0vw !important;
left: 1vw;
right: 1vw;
border: 1px solid var(--announcement-bar-background-color);
}
.section-border:after {
content: "";
position: absolute;
left: 50%;
transform: translatex(-50%);
height: 100%;
width: 0.5px;
background: var(--announcement-bar-background-color);
}
.content-wrapper {
z-index: 9999 !important;
}
@media screen and (max-width:767px) {
.section-border:after {
display: none;
}
}
}
/* Outline v2 */
section[id*="outlinev2"] .section-border:after, section[id*="timelinev1"] .section-border:after {
display: none !important;
}
/* END OUTLINE */
/* SPLIT */
section[id*="split"] {
&{
margin-left: 1vw;
margin-right: 1vw;
}
.section-background {
left: 50%;
}
.section-border:before {
content: "";
position: absolute;
z-index: 999;
top: 1vw;
bottom: 1vw;
left: 1vw;
right: 1vw;
border: 1px solid var(--announcement-bar-background-color);
}
.content-wrapper {
z-index: 9999;
}
@media screen and (max-width:767px) {
& {
flex-direction: column !important;
background-color: var(--siteBackgroundColor);
}
.section-border {
position: static;
width: 100%;
height: 40vh;
}
.section-background {
left: 0 !important;
right: 0 !important;
height: 100% !important;
position: static !important;
}
.content-wrapper {
padding-top: 0px !important;
padding-bottom: 0px !important;
}}}
/* SPLIT WITH IMAGE (LEFT) - COLOR TEXT (RIGHT) */
section[id*="v2split"] {
.section-background {
left: 0%;
right: 50%;
}
.content-wrapper {
padding-bottom: 40px !important;
}
}
/* END SPLIT */
/* HOMEPAGE */
/* Home - image above header */
body.homepage.sqs-edit-mode-active [data-wm-plugin="load"] {
display: none !important;
}
div.wm-load-container .row {
margin: 0 !important;
}
body.homepage:not(.sqs-edit-mode) {
header#header {
display: none;
}
&.show-header header#header {
display: block;
}
}
/* overlap logo */
section[id*="overlap"] {
&>.image-block {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px !important;
height: 150px !important;
z-index: 99999999999;
top: -75px;
background-color: var(--siteBackgroundColor);
border-radius: 50%;
padding: 0px !important;
}
& {
z-index: 9999999 !important;
margin-left: 1vw;
margin-right: 1vw;
}
.section-border:before {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 1vw;
right: 1vw;
bottom: 1vw;
border: 1px solid var(--announcement-bar-background-color);
border-top: 0px;
}
.content-wrapper {
z-index: 99999;
}
}
/* END overlap logo */
/* featured in - logo scroll */
#logo-scroll .slide img {
height: 75px;
}
div#slider-left {
margin-top: 20px;
}
/* end featured in - logo scroll */
/* Home Work */
section[id="home-work"] {
& {
margin-left: 1vw;
margin-right: 1vw;
}
.section-border:before {
content: "";
position: absolute;
z-index: 999;
top: 1vw;
left: 1vw;
right: 1vw;
bottom: 1vw;
border: 1px solid var(--announcement-bar-background-color);
}
.user-items-list {
padding: 60px !important;
}
.content-wrapper {
z-index: 9999999;
}
.list-item-content {
display: flex;
align-items: center;
justify-content: space-between;
}
h2.list-item-content__title {
font-style: italic;
}
a.list-item-content__button:after {
display: none !important;
}
a.list-item-content__button {
border: 1px solid var(--announcement-bar-background-color) !important;
padding: 5px !important;
border-radius: 50%;
}
a.list-item-content__button:hover {
opacity: 0.8;
}
}
/* end Home work */
/* hurry for advice */
section[data-section-id="69ad35d88366c140647e0f40"] {
.section-border:before {
top: 1vw !important;
bottom: 1vw !important;
}
}
/* end hurry for advice */
/* Navigation */
div.header-nav-item>a {
color: var(--solidHeaderNavigationColor) !important;
}
#siteWrapper div.header-nav-item>a, footer.sections .html-block a {
background: none !important;
text-decoration: none;
}
/* Underline on hover */
a.sqs-block-button-element {
background-color: transparent !important;
color: var(--paragraphMediumColor) !important;
padding: 0px !important;
position: relative;
}
div.header-nav-item>a, footer.sections .html-block a {
position: relative;
}
a.sqs-block-button-element:after, div.header-nav-item>a:after, footer.sections .html-block a:after {
content: "";
background: currentColor;
height: 1px;
width: 0%;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
a.sqs-block-button-element:hover:after, div.header-nav-item>a:hover:after, footer.sections .html-block a:hover:after {
width: 100%;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
/* line above button */
div.button-block a:before {
height: 30px;
width: 1px;
margin: 20px auto;
margin-top: 0px;
display: block;
content: "";
background-color: var(--paragraphMediumColor);
}
a.sqs-block-button-element {
flex-direction: column !important;
}
.gallery-block {
// display: none !important;
}
/* Final fix for footer image sizing */
footer.sections .image-block,
footer.sections .image-block img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
position: static !important; /* This stops it from centering weirdly */
transform: none !important;
}
/* Hide the announcement bar entirely */
.sqs-announcement-bar-dropzone {
display: none !important;
}
/* --- SURGICAL FIXES (ADD TO BOTTOM) --- */
/* 1. Hide the green announcement bar */
.sqs-announcement-bar-dropzone {
display: none !important;
}
/* 2. Fix footer image sizing and centering */
footer.sections .image-block,
footer.sections .image-block img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
position: static !important;
transform: none !important;
margin: 0 auto !important;
}
/* 1. Remove the margin that is pushing the sections apart */
section[id*="our-story-outlinev2"] {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
/* 2. Target the section immediately before it to kill its bottom margin */
section[id*="our-story-outlinev2"] + section {
margin-top: 0px !important;
}
/* 3. Kill any extra height being forced by Squarespace */
section[id*="our-story-outlinev2"] {
min-height: 0vh !important;
}
/* Create a visible gap of the light background color between these sections */
section[id*="our-story-split"] {
margin-top: 15px !important; /* Adjust this to change the size of the gap */
}
/* About Page - Vertical line between 3 boxes */
section[id="ourapproachsection"] {
/* remove outline */
.section-border:before {
border: none !important;
}
/* subtext under approach */
.list-section-title p:nth-child(n+2) {
font-size: 15px;
font-family: var(--body-font-font-family);
font-style: var(--body-font-font-style);
font-weight: var(--body-font-font-weight);
line-height: var(--body-font-line-height);
letter-spacing: var(--body-font-letter-spacing);
text-transform: var(--body-font-text-transform);
-webkit-font-smoothing: antialiased;
}
/* padding under our approach */
.list-section-title {
padding-bottom: 40px !important;
}
li.list-item {
border-radius: 0px !important;
position: relative;
overflow: visible !important;
padding-bottom: 40px;
}
li.list-item:nth-child(2):after, li.list-item:nth-child(2):before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 1px;
left: -10px;
z-index: 99999;
background-color: #000;
}
li.list-item:before {
right: -10px;
left: unset !important;
}
@media screen and (max-width:767px) {
li.list-item:after, li.list-item:before {
display: none;
}
li.list-item:nth-child(2) {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding-top: 20px;
padding-bottom: 20px;
}
}
/* Change vertical line color */
.section-border:after {
background: #737a72 !important;
}
li.list-item:nth-child(2):after,
li.list-item:nth-child(2):before {
background-color: #737a72 !important;
}
}
Footer
<!-- Scroll down to next section on click hero text -->
<script>
function initHeroScrollClick() {
const heroHeadings = document.querySelectorAll('section[id*="-hero"] h3');
heroHeadings.forEach(heading => {
heading.style.cursor = 'pointer';
heading.addEventListener('click', function() {
const currentSection = this.closest('section[id*="-hero"]');
const nextSection = currentSection.nextElementSibling;
if (nextSection && nextSection.tagName === 'SECTION') {
nextSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
}
document.addEventListener('DOMContentLoaded', initHeroScrollClick);
window.addEventListener('mercury:load', initHeroScrollClick);
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const nav = document.querySelector('.header-display-desktop nav.header-nav-list');
const logoWrapper = document.querySelector('.header-display-desktop .header-title-logo');
const logoAnchor = logoWrapper ? logoWrapper.querySelector('a') : null;
if(!nav || !logoWrapper || !logoAnchor) return;
const items = Array.from(nav.querySelectorAll('.header-nav-item'));
const half = Math.ceil(items.length / 2);
const leftItems = items.slice(0, half);
const rightItems = items.slice(half);
const leftNav = document.createElement('nav');
leftNav.className = 'header-nav-list header-nav-list--left';
leftItems.forEach(item => leftNav.appendChild(item));
const rightNav = document.createElement('nav');
rightNav.className = 'header-nav-list header-nav-list--right';
rightItems.forEach(item => rightNav.appendChild(item));
logoWrapper.insertBefore(leftNav, logoAnchor);
logoWrapper.appendChild(rightNav);
nav.closest('.header-nav')?.remove();
});
</script>
<style>
.header-display-desktop {
flex-direction: column;
}
.header-nav-list {
flex-wrap: nowrap !important;
}
div.header-title-logo {
display: flex;
align-items: center;
justify-content: center !important;
}
div.header-title-logo div.header-nav-item {
margin-right: 1.5vw;
margin-left: 1.5vw;
}
nav.header-nav-list.header-nav-list--left {
margin-right: 5vw;
}
nav.header-nav-list.header-nav-list--right {
margin-left: 5vw;
justify-content: flex-end !important;
}
@media screen and (min-width:992px) {
div.header-title-logo>* {
flex: 1;
min-width: 0;
}}
</style>
<!-- Image above Header -->
<script src="https://cdn.jsdelivr.net/gh/willmyerscode/section-loader@3/section-loader.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:ready', function() {
const targetSection = document.querySelector('[data-wm-plugin="load"][data-target="/home-hero-above-header"]');
const header = document.querySelector('header#header');
const announcementBar = document.querySelector('.sqs-announcement-bar-dropzone');
if (targetSection && header) {
header.parentNode.insertBefore(targetSection, header);
}
if (announcementBar && targetSection) {
targetSection.parentNode.insertBefore(announcementBar, targetSection);
}
document.body.classList.add('show-header');
});
</script>
<!-- END Image above Header -->
<script defer src="https://cdn.jsdelivr.net/gh/willmyerscode/css-searchbar@0/css-search.min.js"></script>
<!-- Sync Home Work with /work page -->
<script>
(function() {
'use strict';
const CONFIG = {
portfolioUrl: '/portfolio',
retryAttempts: 3,
retryDelay: 1000
};
let portfolioData = null;
async function fetchPortfolioData() {
try {
const response = await fetch(`${CONFIG.portfolioUrl}?format=json`);
if (!response.ok) throw new Error('Failed to fetch portfolio data');
const data = await response.json();
return data.items || [];
} catch (error) {
console.error('Error fetching portfolio:', error);
return null;
}
}
function getItemUrl(item) {
return item.fullUrl || `${CONFIG.portfolioUrl}/${item.urlId}`;
}
function updateListItem(listItem, portfolioItem, index) {
if (!portfolioItem) return;
const itemUrl = getItemUrl(portfolioItem);
const thumbnailUrl = portfolioItem.assetUrl;
const img = listItem.querySelector('.list-item-media img');
if (img && thumbnailUrl) {
img.src = thumbnailUrl;
img.dataset.src = thumbnailUrl;
img.dataset.image = thumbnailUrl;
const srcsetBase = thumbnailUrl.split('?')[0];
img.srcset = [100, 300, 500, 750, 1000, 1500, 2500]
.map(w => `${srcsetBase}?format=${w}w ${w}w`)
.join(', ');
}
const mediaWrapper = listItem.querySelector('.list-item-media');
if (mediaWrapper) {
const link = document.createElement('a');
link.href = itemUrl;
link.style.display = 'block';
const mediaInner = mediaWrapper.querySelector('.list-item-media-inner');
if (mediaInner) {
mediaWrapper.insertBefore(link, mediaInner);
link.appendChild(mediaInner);
}
}
const title = listItem.querySelector('.list-item-content__title');
if (title) {
title.textContent = portfolioItem.title;
const titleLink = document.createElement('a');
titleLink.href = itemUrl;
titleLink.textContent = portfolioItem.title;
titleLink.style.color = 'inherit';
titleLink.style.textDecoration = 'none';
title.textContent = '';
title.appendChild(titleLink);
}
const button = listItem.querySelector('.list-item-content__button');
if (button) {
button.href = itemUrl;
button.removeAttribute('target');
}
}
async function syncItems() {
const section = document.querySelector('#home-work');
if (!section) {
console.error('Section not found');
return;
}
if (!portfolioData) {
portfolioData = await fetchPortfolioData();
if (!portfolioData) return;
}
const listItems = section.querySelectorAll('.list-item');
listItems.forEach((item, index) => {
if (portfolioData[index]) {
updateListItem(item, portfolioData[index], index);
}
});
}
async function init() {
await syncItems();
window.addEventListener('mercury:load', syncItems);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
<!-- END Sync Home Work with /work page -->
<!-- Custom Burger -->
<div data-wm-plugin="load" data-target="/burger"></div>
<div class="custom-burger-trigger" data-close="CLOSE">
MENU
</div>
<script>
(function() {
function initBurger() {
const trigger = document.querySelector('.custom-burger-trigger');
if (trigger && !trigger.dataset.burgerInit) {
trigger.dataset.burgerInit = 'true';
trigger.addEventListener('click', function() {
document.body.classList.toggle('open-custom-burger');
});
}
}
document.addEventListener('DOMContentLoaded', initBurger);
document.addEventListener('mercury:load', initBurger);
})();
</script>
<!-- END Custom Burger -->
<!-- Other Pages - Show "Menu" on scroll -->
<script>
(function() {
let lastScrollTop = 0;
const scrollThreshold = 150;
function handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > scrollThreshold) {
document.body.classList.add('show-menu');
} else {
document.body.classList.remove('show-menu');
}
lastScrollTop = scrollTop;
}
window.addEventListener('scroll', handleScroll, { passive: true });
handleScroll();
})();
</script>
<style>
body:not(.homepage) .custom-burger-trigger {
display: none;
}
.show-menu .custom-burger-trigger {
display: block !important;
}
</style>
<!-- END Other Pages - Show "Menu" on scroll -->