Code Backup

// --------------------------
// ⬆️ Animation on Scroll
// --------------------------

body.animate-in-scroll-container.effect-moveUp .will-animate {
  -webkit-transform: translateY(10px); transform: translateY(10px);
}
body.animate-in-scroll-container.effect-moveUp .will-animate.animate {
  -webkit-transform: translateY(0); transform: translateY(0);
}

body:not(.sqs-edit-mode-active) #split-group-3 .wm-split-1 {
  position: sticky !important;
  top: 0;
  z-index: 2;
}

body, html {
    overflow-x: initial !important;
}

// --------------------------
// 2️⃣ SPLIT SECTIONS
// --------------------------

.wm-split-sections.mobile-breakpoint .wm-split-section {
    min-height:50vh !important;
}

// --------------------------
// ✍️ TYPOGRAPHY
// --------------------------

@font-face {    
  font-family: 'Taylor';       
  src: url('https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6556ce4a0b3d8a40de47f944/1700187722582/TP-Taylor-Demian-Script.ttf');
} 

.header-title-text,
a.footer-title, 
.header-display-mobile .header-title-text {
  font-family: 'Taylor';
}

.list-section-title p {
  font-size: 2.8rem !important;
}

h1, h2 {
  // font-family: adobe-handwriting-ernie;
}

h3 em {
  font-family: p22-mackinac-pro;
  // font-style: normal;
}

.sqsrte-large:first-child::first-letter {
  padding-right: 15px;
  -webkit-initial-letter: 2;
  initial-letter: 2;
}

// --------------------------
// 🥦 TEXTURE BACKGROUNDS
// --------------------------

.light, .bright, .dark, .dark-bold, .black, .header-menu { 
  .section-background {
    &::after {
      content:"";
      display:block;
      position:relative;
      width:100%;
      height:100%;
  // background-size:cover;
  // background-image:url(https://static1.squarespace.com/static/653183fe1547b0591745c93a/t/65320feae59d651defac2a3b/1697779690987/noisy-background.jpg);
  // opacity: 0.075;
    }
  }
}

// --------------------------
// 🌅 GRADIENT BACKGROUNDS
// --------------------------

/* 👋🏻 LIGHT */
.light:not(.has-background) .section-background {
  background-color: #fbf9f3;
  &::after {
    background-image:url(https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6568291ff11af86656e7a679/1701325088154/white_plaster.jpg);
    opacity: 0.03;
    mix-blend-mode: multiply;
  }
} 

/* 🩵 BRIGHT */
.bright:not(.has-background) .section-background {
  background-color: #0b7fab;
  box-shadow: rgba(0, 0, 0, 0.5) 0px -300px 300px -300px inset;
  &::after {
    background-image:url(https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/65681328b1f18c5afdc4f1a9/1701319465052/natural-01.jpg);
    opacity: 0.1;
    mix-blend-mode: multiply;
  }
} 

/* 🔵 DARK */
.dark:not(.has-background) .section-background {
  background-color: #043b5c;
  box-shadow: rgba(0, 0, 0, 0.8) 0px -300px 300px -300px inset;
  &::after {
    background-image:url(https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/65681328b1f18c5afdc4f1a9/1701319465052/natural-01.jpg);
    opacity: 0.18;
    mix-blend-mode: multiply;
  }
} 

/* 🟤 DARK-BOLD */
.dark-bold:not(.has-background) .section-background {
  background-color: #333333;
  box-shadow: rgba(0, 0, 0, 0.5) 0px -300px 300px -300px inset;
  &::after {
    background-image:url(https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6568291ff11af86656e7a679/1701325088154/white_plaster.jpg);
    opacity: 0.08;
    mix-blend-mode: multiply;
  }
} 

/* ⚫️ BLACK */
.black:not(.has-background) .section-background {
  background-color: #070604;
  &::after {
    background-image:url(https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/65681328b1f18c5afdc4f1a9/1701319465052/natural-01.jpg);
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
}

// --------------------------
// 📰 MENU: MAIN
// --------------------------

section[data-section-id="653185c0de01e7410e8676dc"] .section-background {
  top: var(--header-offset);
}

#page .wm-split-sections:first-of-type .has-background .section-background { 
  // top: var(--header-offset);
}

// --------------------------
// 📱 MENU: MOBILE
// --------------------------

.header-menu-nav-wrapper a {
  // font-weight: 800;
  // color: rgb(0, 125, 143) !important;
}

.header-display-mobile .header-title-text {
  font-size: 2.5em;
}


// --------------------------
// 🎞️ CAROUSELS
// --------------------------

.user-items-list-carousel__slide {
  border-radius: 5px;
}

.sqs-block .sqs-gallery-thumbnails .sqs-video-thumbnail {
  padding: 0 2px;
}

// Video Gallery
.sqs-gallery-block-slideshow .meta {
  background: none !important;
  max-width: 100% !important;
  text-align: center;
  .meta-title {
    letter-spacing: 0px;
    font-size: 1.2em;
    padding-bottom: 10px;
    font-weight: 500;
  }
}

// --------------------------
// 📰 BLOG
// --------------------------

.blog-side-by-side {
  max-width: 70vw;
  .post-type-text {
    background-color: #fff;
    // border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.075);
  }
}

.blog-side-by-side-wrapper,
.blog-side-by-side-item-wrapper {
  padding-top: 60px !important;
}

body:not(.sqs-layout-editing) .wm-blog-banner{
  // min-height:80vh !important; 
}

.item-pagination {
  // background-color: #fff !important;
}

.wm-banner-style-5 .wm-blog-banner .section-background-image {
  clip-path: none !important;
}

.blog-item-inner-wrapper {
  padding: 50px !important;
  background-color: #fff !important;
  h3 {
    font-size: 2em;
  }
}

// --------------------------
// 🎼 DISCOGRAPHY
// --------------------------

.bandcamp-container {
  img {
    margin-bottom: -10px !important;
  }
  // padding-right: 30px;
}

.gallery-grid {
  .gallery-grid-item {
    opacity: 0.4;
    transition: all .2s ease;
    filter: grayscale(100%);
    &:hover {
      opacity: 1;
      // transform: scale(1.05);
      z-index: 9999 !important;
      filter: grayscale(0%);
    }
  }
}



// --------------------------
// ⚓️ ANCHOR LINKS
// --------------------------

html {scroll-behavior: smooth;}
.anchor-link {scroll-margin: 200px;}

// --------------------------
// 🪗 ACCORDION
// --------------------------

.accordion-block {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
}

// --------------------------
// 🐾 FOOTER
// --------------------------

.footer-logo {
  max-width: 180px !important;
}

a.footer-title {
  font-size: 3em;
}

#footer-sections {
  pre code a {
    padding-top: 20px;
    font-size: 0.75em;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
  }
}

#footer-sections {
  a:hover img {
    opacity: 0.5;
  }
}

.footer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border-radius: 5px;
  border: 2px solid #638BAC;
  background: #111;
  transition: background-color 0.3s ease;
  h4 {
    font-size: 80%;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  &:hover {
    background: #638BAC;
    border-color: #638BAC;
  }
}


// --------------------------
// 📱 MOBILE
// --------------------------
@media(max-width: 767px) {
  
  .list-section-title p {
    line-height: 1;
    padding: 0 8%;
    font-size: 80% !important;
  }
  
  // Large Sections
  .page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--large>.content-wrapper {
    padding-top: 5vmax;
    padding-bottom: 5vmax;
  }
  
  // Medium Sections
  .page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
    padding-top: 3vmax;
    padding-bottom: 3vmax;
  }
  
  section[data-section-id="6531cdcc8e5bdd53d8b47193"] {
    text-align: center;
    p, .social-icon-alignment-right .sqs-svg-icon--list {
      text-align: center !important;
    }
  }
  
  // BLOG
  .blog-side-by-side {
    max-width: 95vw;
    .blog-item-summary {
      padding: 0 30px 20px 30px;
    }
  }
  
} // no delete

.wm-split-sections.mobile-breakpoint .wm-split-section {
   min-height:35vh !important;
}


// --------------------------
// 📹 BG VIDEO CONTROLS
// --------------------------

/*Background Video Controls*/
.wm-background-video-control {
  --icon-size: 12px;
  --icon-padding: 8px;
  --icon-margin: 20px;

  --icon-color: hsla(0, 0%, 0%, 1);
  --icon-fill: hsla(0, 0%, 0%, 1);
  --icon-stroke-width: 4px;

  --icon-border-radius: 50%;
  --icon-border-width: 0px;
  --icon-border-color: hsla(0, 0%, 0%, 100%);

  --icon-background-color: hsla(0, 0%, 100%, 100%);
  --icon-background-blur: 5px;
  --icon-background-shadow: 0px 0px 8px hsla(0, 0%, 0%, .67);
  --icon-drop-shadow: none;
}

// --------------------------
// 📼 VIDEOS
// --------------------------

.lessons {
  padding: 12vh 0 !important;
}

/*

https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6572bf42373a630b31969f83/1702018883316/rubato.jpg

https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6572bf42373a630b31969f82/1702018883326/home-isnt-home.jpg

https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6572bf4200810a3f9b6c2436/1702018883253/practice-makes-perfect.jpg

https://static1.squarespace.com/static/65566ba7a974d17bfad7bb8f/t/6572bf42bc50c71cf3d81e70/1702018882678/equinox.jpg

*/

// ----------------------
// Home Testimonials
// ----------------------

#collection-6572ac7823f634687835e769 {
  
  [data-section-id="6586172eec2a0670dbb4174c"] {
    height: 100vh !important; 
  }
  .user-items-list {
    padding-top: 100vh !important;
    // .list-item {background: red;}
    .list-item-content__title {
      text-shadow: rgba(0,0,0,1) 0 0 20px;
    }
  }
}

// ----------------------
// 💿 Discography Page
// ----------------------

#collection-659f15b48845265e86143d16 {
  
  .user-items-list-simple {
    max-width: 85%;
  }
  
}

@media (min-width: 768px) {
#collection-659f15b48845265e86143d16 {
  
  .user-items-list-simple .list-item {
    flex-direction: row;
    .list-item-media {
  	  width: 48% !important;
    }
    .list-item-content {
      width: 48% !important;
      display: flex;
      justify-content: center;
      flex-direction: column; 
      padding-bottom: 4% !important;
      // background-color: #eee;
    }
  }
  
}
}

<!-- Animate On Scroll -->
<link rel="stylesheet" href="//assets.squarewebsites.org/animate-on-scroll/style.css?v=2"/>
<style> body {opacity: 0;} </style>
<script>
window.animOnScrollConfig = {
    'body': {
        items: 'h1, h2, h3, h4, #page img, #page p, .header-nav-item, .button-block, pre code',
        easing: 'ease',
        effect: 'moveUp',
        minDuration: 1,
        maxDuration: 3,
        viewportFactor: 0.10,
        reverse: false
     }
    };
</script>

<!-- Split Section CSS from Will-Myers.com -->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/splitSections@3/styles.min.css" id="wm-split-css">

<!-- Section Loader Supreme From Will-Myers.com -->
<link href="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sectionLoader@1/sectionLoader.min.css" rel="stylesheet">

<!-- Form Lightbox Trigger from Will-Myers.com-->
<script>
  window.addEventListener('DOMContentLoaded', () => {
    let formBlockId = '#block-yui_3_17_2_1_1701327766140_3217';

    let textBtn = document.querySelector('[href="#open-form"]');
    let form = document.querySelector(formBlockId);
    let lightboxBtn = form.querySelector('button.lightbox-handle');

    textBtn.addEventListener('click', (e) => {
      e.preventDefault();
      lightboxBtn.click()
    })

  })

</script>

<style>
  body:not(.sqs-edit-mode-active) #block-yui_3_17_2_1_1701327766140_3217 {
    display: none;
  }
</style>

<!-- Auto Scroll Layout Sections from Will-Myers.com -->
<script>
  (function(){
    let playInBackend = true,
        timing = 7,
        section = '',
        direction = 1; //1 = forwards, 0 = backwards

    /*Do not Adjust below this line*/
function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}window.addEventListener("load",function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach(e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)})});
  }());
</script>

<!-- Animate On Scroll -->
<script src="//assets.squarewebsites.org/animate-on-scroll/anim-on-scroll.js"></script>

<!-- Split Section + Blog Javascript from Will-Myers.com -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/splitSections@3/javascript.min.js"></script>

<!-- BG Video Controls — Will-Myers -->
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/backgroundVideoControls@1/javascript.min.js"></script>

<!-- Section Loader Supreme From Will-Myers.com -->
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sectionLoader@1/sectionLoader.min.js"></script>

<!-- Header offset -->
<script>
(function(){
   let header = document.querySelector('#header') || document.querySelector('header.Header');
   if (header == null) return;

	 let body = document.querySelector('body'),
			 headerType,
			 cl = body.classList,
			 offset;

   function setOffset() {
	   if (body.matches('.tweak-fixed-header.tweak-fixed-header-style-basic')) {
	     let rect = header.getBoundingClientRect();
			 offset = rect.height + 'px';
		 } else if (body.matches('.tweak-fixed-header.tweak-fixed-header-style-scroll-back')){
			 let rect = header.getBoundingClientRect();
			 offset = rect.bottom > 0 ? rect.bottom + 'px' : '0px';
		 } else {
			 offset = '0px'
		 }
     body.style.setProperty('--header-offset', offset);
   }

   setOffset();
   header.addEventListener('transitionend', setOffset);
   window.addEventListener('resize', setOffset)
}());
</script>

<!-- Admin UI -->
<script async src="https://assets.squarewebsites.org/sqstools-ext/themes/init.js"></script>