MariaFY

Change above to this
.section-background, section[data-section-id="6282ec0605378468086aaf30"] .section-border { background-color: transparent !important; }  

@tuanphan Thanks! It was selected for buttons and miscelleaneous before but at a different font weight. Adjusting the font weight to 400 did the job. Thanks a lot!

@MariaFY SS loads some weights only.
In order to use Ubuntu Mono 400, it has to be selected as a font for something else so that Squarespace loads the font/font weight onto the website first.

Add to Design > Custom CSS
@media screen and (min-width:768px) { [data-section-id="6440e1c28a8cbf7010a655b8"] { position: sticky; top: 0; z-index: 99999; } }  

@tuanphan Yes!
I just adjusted the margin: 
.header-layout-branding-center .header-title { margin-bottom:-10%; }  

Try this
body#cart .header-background-gradient { background: unset !important; }  

Add to Design > Custom CSS
body[class*="type-products"].view-item .header-background-gradient { background: unset !important; }  

Add to Design > Custom CSS
/* on scroll header */ header#header.shrink { background: black !important; } header#header.shrink img { filter: brightness(0) invert(1); } header#header.shrink .header-nav-list * { color: white; } header#header.shrink .header-actions * { fill: white; stroke: white; }  

Hey there, I'm looking to create a split section with 1 side fixed and 1 side that scrolls as seen on this page: https://www.violahillstudio.com/work Is there any code snipped, or tutorial you guys know to recreate this layout? I'm using Brine! 

Add to Design > Custom CSS
/* resize home mobile banner */ @media screen and (max-width:640px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; } section#new-page-3 { min-height: unset !important; height: 250px; } section#new-page-3 * { font-size: 20px; } div#block-yui_3_17_2_1_1611282973245_7194 { margin-top: 100px; } }  

Thanks @IXStudio, that did the job. Appreciate your time! 

Hi
Use this code in Design -> Custom CSS
.Loader { position: fixed; top: 0; left: -100%; width: 100%; height: 1440px; z-index: 9999; background-color: transparent; -webkit-transition: background-color .3s ease-out,transform 0s .3s linear; -moz-transition: background-color .3s ease-out,transform 0s .3s linear; -ms-transition: background-color .3s ease-out,transform 0s .3s linear; -o-transition: background-color .3s ease-out,transform 0s .3s linear; transition: background-color .3s ease-out,transform 0s .3s linear; display: none }[data-mercury-loading] .Loader { background-color: rgba(255,255,255,.22); -webkit-transition: transform .3s cubic-bezier(0,0,0,.618); -moz-transition: transform .3s cubic-bezier(0,0,0,.618); -ms-transition: transform .3s cubic-bezier(0,0,0,.618); -o-transition: transform .3s cubic-bezier(0,0,0,.618); transition: transform .3s cubic-bezier(0,0,0,.618); -webkit-transform: translatex(60%); -moz-transform: translatex(60%); -ms-transform: translatex(60%); -o-transform: translatex(60%); transform: translatex(60%) }[data-mercury-loading='done'] .Loader { -webkit-transform: translatex(100%); -moz-transform: translatex(100%); -ms-transform: translatex(100%); -o-transform: translatex(100%); transform: translatex(100%) } .tweak-site-ajax-loading-enable.tweak-site-ajax-loading-bar-show .Loader { display: block } Please use the like button if it helps you!
 
Best,
Leopold

If you inspect element above site, you will see this tag
If you remove this tag, the effect will disappear ;)