/* 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*="our-story-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="our-story-outlinev2"] {
/* 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;
}
}
}
12-04 (Home)
<div data-wm-plugin="load" data-target="/home-hero-above-header"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
const interval = setInterval(() => {
let galleryBlock = $('#logo-scroll .gallery-block');
let imgs = galleryBlock.find('img');
if (imgs.length > 0) {
let addLeft = '<div id="slider-left" class="slider"><div class="slide-track" id="slides-left">';
for (let j=0; j<9; j++) {
for (let i = 0; i<imgs.length; i++) {
addLeft += '<div class="slide"><img src="'+ $(imgs[i]).attr('data-src') +'" alt="" /></div>';
}
}
addLeft += '</div></div>';
galleryBlock.after(addLeft);
galleryBlock.css('display', 'none');
clearInterval(interval);
}
}, 100);
});
</script>
<style>
@keyframes scrollLeft {
0% { transform: translateX(0); }
100% {transform: translateX(calc(-250px * 45));}
}
.slider {
margin: auto;
overflow: hidden;
position: relative;
width: 100%;
}
#slider-left .slide-track {
animation: scrollLeft 150s linear infinite;
display: flex;
}
#logo-scroll .slide {
padding: 0 40px;
}
section:has(div#slider-left) {
overflow: hidden;
}
section:has(#slider-left) .fluid-engine {
--row-height-scaling-factor: 0;
row-gap: 0px;
}
#slider-left {
margin-top: 30px !important;
}
</style>
<style>
article section:first-child {
padding-top: 0px !important;
}
</style>
<!-- Overlap Logo -->
<script>
(function() {
function moveImage() {
const section = document.querySelector('section[id*="overlap"]');
if (!section) return;
const img = section.querySelector('.image-block');
const border = section.querySelector('.section-border');
if (img && border) {
border.parentNode.insertBefore(img, border);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', moveImage);
} else {
moveImage();
}
window.addEventListener('mercury:load', moveImage);
})();
</script>
<style>
@media screen and (max-width:767px) {
section#home-split {
min-height: unset !important;
}}
</style>
Portfolio (12-04), border with 3 items/row
<style>
div#gridThumbs {
padding: 0px !important;
margin: 1vw;
width: calc(100% - 2vw);
transform: none !important;
}
a.grid-item {
border-top: 1px solid var(--announcement-bar-background-color);
border-left: 1px solid var(--announcement-bar-background-color);
padding: 3vw;
}
@media screen and (min-width: 768px) {
a.grid-item:nth-child(3n) {
border-right: 1px solid var(--announcement-bar-background-color);
}
a.grid-item:last-child:not(:nth-child(3n)) {
border-right: 1px solid var(--announcement-bar-background-color);
}
a.grid-item:nth-last-child(-n+3):nth-child(3n+1),
a.grid-item:nth-last-child(-n+3):nth-child(3n+2),
a.grid-item:nth-last-child(-n+3):nth-child(3n) {
border-bottom: 1px solid var(--announcement-bar-background-color);
}
}
@media screen and (max-width: 767px) {
a.grid-item {
border-right: 1px solid var(--announcement-bar-background-color);
border-bottom: 1px solid var(--announcement-bar-background-color);
}
a.grid-item:last-child {
border-bottom: 1px solid var(--announcement-bar-background-color);
}
}
h3.portfolio-title {
font-style: italic !important;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px !important;
}
h3.portfolio-title:after {
content: "View";
border: 1px solid currentColor;
border-radius: 50%;
padding: 5px;
}
/* Portfolio item hero heading text size */
@media screen and (min-width:768px) {
article section[id*="-hero"] h1 {
font-size: 100px;
}
}
</style>
Approach (12-04)
<style>
section#experience-parallax .content {
background-color: var(--siteBackgroundColor);
padding: 3vw;
max-width: 50%;
}
section#experience-parallax {
margin: 0 1vw !important;
}
section#experience-parallax .fluid-engine {
--row-height-scaling-factor: 0 !important;
}
@media screen and (min-width:768px) {
section#experience-parallax img {
opacity: 0;
}
section#experience-parallax .section-background {
background-attachment: fixed;
background-color: transparent !important;
}
}
section[id*="timelinev1"] .user-items-list {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
section[id*="timelinev1"] {
margin-top: 1vw;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const section = document.querySelector('#experience-parallax .section-background');
const img = document.querySelector('#experience-parallax img[data-src]');
if (section && img) {
const imgSrc = img.getAttribute('data-src') || img.getAttribute('src');
if (imgSrc) {
section.style.backgroundImage = `url(${imgSrc})`;
section.style.backgroundSize = 'cover';
section.style.backgroundPosition = 'center';
}
}
});
</script>
<!-- @tuanphan - Timelinev1 -->
<style>
section[id*="timelinev1"] {
--timelinev1-padding: 40px 20px;
--timelinev1-max-width: 900px;
--timelinev1-dot-background: #cfcfcf;
--timelinev1-line-color: #e8e8e8;
--timelinev1-title-size: 14px;
--timelinev1-title-size-mobile: 10px;
--timelinev1-title-width-mobile: 110px;
--timelinev1-description-size-mobile: 12px;
--timelinev1-gap: 26px;
}
section[id*="timelinev1"] .tp-timeline{
max-width: var(--timelinev1-max-width);
margin: 0 auto;
padding: var(--timelinev1-padding);
}
section[id*="timelinev1"] .tp-timeline__list{
position: relative;
display: flex;
flex-direction: column;
gap: var(--timelinev1-gap);
}
section[id*="timelinev1"] .tp-rail-global{
position: absolute;
left: 29px;
top: var(--tp-rail-top, 0px);
height: var(--tp-rail-h, 0px);
width: 2px;
background: var(--timelinev1-line-color);
border-radius: 2px;
z-index: 0;
}
section[id*="timelinev1"] .tp-rail-global:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
height: var(--tp-progress-h, 0px);
background: var(--list-section-simple-card-color);
border-radius: 2px;
}
section[id*="timelinev1"] .tp-item{
display: grid;
grid-template-columns: 180px 1fr;
gap: 22px;
align-items: center;
}
section[id*="timelinev1"] .tp-rail{
position: relative;
display: flex;
align-items: center;
min-height: 160px;
z-index: 1;
}
section[id*="timelinev1"] .tp-dot{
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--timelinev1-dot-background);
transition: background .25s ease;
}
section[id*="timelinev1"] .tp-dot.is-active{
background: var(--list-section-simple-card-color);
}
section[id*="timelinev1"] .tp-meta{
margin-left: 58px;
display: flex;
flex-direction: column;
gap: 6px;
}
section[id*="timelinev1"] .tp-date {
letter-spacing: .12em;
color: var(--list-section-simple-card-color);
font-size: var(--timelinev1-title-size);
line-height: 20px;
}
section[id*="timelinev1"] .tp-card{
background: var(--list-section-simple-card-color);
border-radius: 14px;
padding: 36px 34px;
}
section[id*="timelinev1"] .tp-card__p{
margin: 0;
color: hsl(var(--white-hsl));
}
section[id*="timelinev1"] .tp-hide-original{
display: none !important;
}
@media (max-width:980px){
section[id*="timelinev1"] .tp-timeline{
padding: 28px 5px;
}
section[id*="timelinev1"] .tp-timeline__list{
gap: 18px;
}
section[id*="timelinev1"] .tp-item{
grid-template-columns: minmax(var(--timelinev1-title-width-mobile), 22vw) minmax(0, 1fr);
gap: 8px;
align-items: start;
}
section[id*="timelinev1"] .tp-rail{
min-height: 92px;
align-items: flex-start;
padding-top: 14px;
}
section[id*="timelinev1"] .tp-rail-global{
left: 7px;
width: 1px;
}
section[id*="timelinev1"] .tp-rail-global:after{
width: 1px;
}
section[id*="timelinev1"] .tp-dot{
left: 2px;
top: 14px;
transform: none;
width: 12px;
height: 12px;
}
section[id*="timelinev1"] .tp-meta{
margin-left: 16px;
max-width: 108px;
}
section[id*="timelinev1"] .tp-date{
font-size: var(--timelinev1-title-size-mobile);
letter-spacing: .10em;
padding: 3px 6px;
border-radius: 999px;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
}
section[id*="timelinev1"] .tp-card{
transform: scale(.95);
transform-origin: left top;
padding: 18px 18px 22px;
}
.tp-card__p {
font-size: var(--timelinev1-description-size-mobile);
}
}
</style>
<script>
!function(){function e(e){var t,n,r=e&&e.getAttribute("data-current-context");if(!r)return null;try{return JSON.parse(r)}catch(e){}try{return JSON.parse((t=r,(n=document.createElement("textarea")).innerHTML=String(t||""),n.value))}catch(e){}try{return JSON.parse(String(r).replace(/"/g,'"'))}catch(e){}return null}function t(e){var t=(e?[].slice.call(e.querySelectorAll("p")):[]).map((function(e){return(e.textContent||"").replace(/\s+/g," ").trim()})).filter(Boolean);return t.length?t.join(" ").trim():""}function n(){var r=document.querySelector('section[id*="timelinev1"]');if(r){var i=r.querySelector("ul.user-items-list-item-container");if(i){var a=e(i),l=a&&a.userItems?a.userItems:null,c=[].slice.call(i.querySelectorAll("li.list-item"));!c.length&&l&&l.length&&(c=new Array(l.length).fill(null));var o=r.querySelector(".tp-timeline");o&&o.remove();var d=document.createElement("section");d.className="tp-timeline",d.id="tpTimeline";var m=document.createElement("div");m.className="tp-timeline__list",m.id="tpTimelineList";var s=document.createElement("div");s.className="tp-rail-global",s.id="tpRail",m.appendChild(s),c.forEach((function(e,n){var r="",i="";if(e){var a=e.querySelector(".list-item-content__title");r=(a?a.textContent:"").trim();var c=t(e.querySelector(".list-item-content__description"));i=c}if(l&&l[n]){var o=l[n];if(r||(r=String(o.title||"").trim()),!i&&o.description){var d=document.createElement("div");d.innerHTML=o.description;var s=t(d);i=s}}r||(r="Item "+(n+1)),i||(i="");var u=document.createElement("article");u.className="tp-item";var p=document.createElement("div");p.className="tp-rail";var v=document.createElement("span");v.className="tp-dot",p.appendChild(v);var h=document.createElement("div");h.className="tp-meta";var g=document.createElement("div");g.className="tp-date",g.textContent=r,h.appendChild(g),p.appendChild(h);var f=document.createElement("div");f.className="tp-card";var y=document.createElement("p");y.className="tp-card__p",y.textContent=i,f.appendChild(y),u.appendChild(p),u.appendChild(f),m.appendChild(u)})),d.appendChild(m),i.parentNode.insertBefore(d,i),i.classList.add("tp-hide-original"),function(e){var t=e.querySelector("#tpTimelineList"),n=e.querySelector("#tpRail");if(!t||!n)return;var r=[].slice.call(t.querySelectorAll(".tp-dot"));if(!r.length)return;var i=0,a=0;function l(e,t,n){return e<t?t:e>n?n:e}function c(e){var t=e.getBoundingClientRect();return t.top+t.height/2}function o(){return window.matchMedia&&window.matchMedia("(max-width:980px)").matches}function d(e,r){var i=e-t.getBoundingClientRect().top,a=Math.max(0,r-e);return n.style.setProperty("--tp-rail-top",i+"px"),n.style.setProperty("--tp-rail-h",a+"px"),a}function m(e,t){return l((o()?.58*window.innerHeight:.55*window.innerHeight)-e,0,t)}function s(e,t,n){for(var i=0;i<r.length;i++){var a=l(c(r[i])-e,0,t);r[i].classList.toggle("is-active",a<=n+.5)}}function u(){i=0;var e=c(r[0]),t=d(e,c(r[r.length-1])),l=m(e,t);a+=.12*(l-a),Math.abs(l-a)<.35&&(a=l),n.style.setProperty("--tp-progress-h",a+"px"),s(e,t,a),Math.abs(l-a)>=.35&&p()}function p(){i||(i=requestAnimationFrame(u))}window.addEventListener("scroll",p,{passive:!0}),window.addEventListener("resize",(function(){a=0,p()})),document.fonts&&document.fonts.ready&&document.fonts.ready.then(p).catch((function(){}));p()}(r)}}}function r(){n()}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):r(),document.addEventListener("mercury:load",r)}();
</script>
CSS (15-04)
/* General */
/* HEADER */
body.homepage header#header {
position: relative !important;
}
body.sqs-edit-mode-active header#header {
position: absolute !important;
}
body.homepage header#header {
img {
content: url(https://static1.squarespace.com/static/698a7a02fa5a272e6573c4c6/t/69da1d41f0150f203f8e8166/1775902017766/SC_Circle.png);
margin: 0 auto;
}
}
/* 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: #fff;
}
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 #fff;
border-bottom: 1px solid #fff;
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: #fff !important;
}
}
/* Footer on Mobile */
footer.sections {
@media screen and (max-width:767px) {
.html-block *:not(a) {
display: block;
text-align: center;
font-size: 0px;
}
.html-block a span {
font-size: 14px;
display: block;
line-height: 30px;
}
}
}