CSS


CODE INJECTION

<meta name="robots" content="noindex">

 

Prevent iOS from opening audio blocks in new window

<script>

Y.on('domready', function(){

Y.UA.ios = 0; //Y.UA object have test key for different platforms.

//Setting ios value to 0 here allow to skip default Audio Block's behavior

})

 </script>

STANDARD CSS

CSS that should be applied to all House Digital websites

// remove required (*) from forms
span.required {
display: none;
}

// Freeze maps to prevent scrolling issue especially on desktop
.sqs-block-map {pointer-events: none;}


Use this if the website uses a light background

// Change the color of x in gallery lightbox
.sqs-lightbox-close {
color: #000 !important;
}


OTHER CSS SNIPPETS THAT SOMETIMES CAN BE HELPFUL

// Style carousel so that non-active images are opaque

.thumb-image {

opacity: .2;

}

//Add border to right side of image in carousel

.sqs-active-slide {

border-right: 7px white solid !important;

opacity: 1 !important;

}

//Determine width of lightbox window

.c-lightbox__content {

max-width: 95% !important;

}

//Make Terms text more readable

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper {

font-weight: 500;

color: #000;

}

//Create underline under nav when hover

nav a:hover, .active-link {
border-bottom: 1px solid !important;
}

//Add negative margin above anchor link code block in order to negate 17px top and bottom padding

.sqs-block-code, .code-block {

margin-top: -34px !important;

}

//Hide caption on lightbox images

.sqs-lightbox-meta {

display: none;

}

//Style audio play button

#block-yui_3_17_2_1_1543353640926_11440 {

max-width: 60px;

margin-left: auto;

margin-right: auto;

}

.sqs-widgets-audio-player {

border-radius: 100px;

}

.sqs-widgets-audio-player .played {

display: none !important;

}

.sqs-widgets-audio-player .action {

border-right: 0px;

}

.sqs-widgets-audio-player .action .play-button {

margin-left: 3px;

}

.sqs-widgets-audio-player .action .pause {

margin-left: 1px;

}

//hide announcement bar on all pages except About page
body:not(#collection-5ab9d1b9575d1f042128d8e4) .sqs-announcement-bar { display: none !important; }

 

// restrict width of mobile menu flyout
@media screen and (max-width: 600px) {
.Mobile-overlay-menu {
  width: calc(100% - 50px) !important;
  }}
@media screen and (min-width: 601px) and (max-width: 900px) {
.Mobile-overlay-menu {
  width: calc(100% - 70px) !important;
  }}
@media screen and (min-width: 901px) {
.Mobile-overlay-menu {
  width: calc(100% - 80px) !important;
  }}

 

// Make galleries fill just one column in mobile

@media only screen and (max-width: 640px)

{.sqs-gallery-design-grid-slide {

width: 100% !important;

clear: none !important;

}

}

// Remove top padding from mobile secondary navigation first child
.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
  padding-top: 0em !important;
}

 

// Style newsletter box title in brine template

// Style newsletter heading.newsletter-form-header {
  h2 {
    text-transform: uppercase !important;
  }
}

 

// Hover effect on poster images
.design-layout-poster:hover {
  opacity: 0.7;
  transition: .5s ease; 
}

.tweak-quote-block-alignment-center .sqs-block-quote {
   font-weight: 500;
   background: #f9f9f9;
   border-left: 10px solid #8E6396;
   margin: 0 10px;
   padding: 0.5em 10px;
   font-style: italic;
   text-align: left;
   font-size: 16px;
}

 

//  Change the footer font size
#footer{
    font-size: 13px !important;
  h2 {
    font-size: 15px;
  }
}

// Add border to footer
#footer {
  border-top: 1px solid hsl(224, 84%, 39%);
}

// Change the color of dividers
.sqs-block-horizontalrule hr {
  background-color: #c9cacc !important;
  height: 1px;
}

// Hide share buttons on products pages
.ProductItem-details-share {
  display: none !important;
}

// remove middle footer block/
#footerBlocksMiddle {
display: none;
}

// remove top footer block/
#footerBlocksTop {
display: none;
}

// Remove hyphens
h1, h2, h3, p {
   -webkit-hyphens: manual !important;
      -moz-hyphens: manual !important;
       -ms-hyphens: manual !important;
           hyphens: manual !important;
 }

 

// CREATE BUTTONS ON HOME PAGE SLIDER GALLERY FOR BRINE TEMPLATE

// BUTTONS OF GALLERY
.Index-gallery-item-content--has-title-and-body p a {

margin-left: -2px;
       color: #000;
       text-transform: uppercase;
       font-size: 12px;
       letter-spacing: 1px;
       font-weight: 500;
       margin-top: 15px !important;
       margin-bottom: 20px !important;
       display: inline-block;
       border: solid 1px #000;
       padding: 15px 20px;
       text-align: center;
       border-radius: 5px;
  transition: all ease-in-out 100ms !important;
  -moz-transition: all ease-in-out 100ms !important;
  -webkit-transition: all ease-in-out 100ms !important;
     }
.Index-gallery-item-content--has-title-and-body p a:hover {
       background: #222 !important;
      border: #222;
       color: #fff;
     }

// Chang color of indicators
.tweak-index-gallery-indicators-dots .Index-gallery-indicators-item .Index-gallery-indicators-item-inner {
  border: 2px #999 solid;
}

// Disable gallery slide on gallery hover, yet enable for arrows and buttons on home page gallery
.Index-gallery-wrapper, .gallery-root {
  pointer-events: none;
}
.gallery-root a, .Index-gallery-indicators, .Index-gallery-control, .Index-gallery-control--left {
   pointer-events: initial;
  }

/* Transform gallery block thumbnails into bullets. */

.sqs-gallery-design-strip-slide {

opacity: 0 !important;

background-color: #9bd9f2; /* Set color as desired. */

border: 0px solid #798b9c !important; /* Set border as desired. */

width: 0px !important;

height: 0px !important;

padding: 2px !important; /* Set size of bullets/dots as desired. */

margin-left: .3em !important; /* Set space between as desired Remember: small screens! */

margin-right: 0.2em !important;

float: none; /* Set to right or left if desired. */

border-radius: 0%; /* Remove for square bullets/dots. */

display: inline-block; /* For video thumbnails. */

}

.sqs-gallery-design-strip-slide.loaded, .sqs-gallery-design-strip-slide.sqs-video-thumbnail {

opacity: 1 !important;

}

.sqs-video-thumbnail-icon {

display: none;

}

.sqs-gallery-design-strip {

height: inherit !important;

}

.sqs-gallery-design-strip .sqs-wrapper {

width: 100% !important;

left: 0 !important;

text-align: center;

}

.sqs-gallery-design-strip-slide.sqs-active-slide {

background-color: #fe6b00; /* Set color as desired */

}

#promotedGalleryWrapper, .promoted-gallery-wrapper {

background-color: transparent; /* For promoted gallery blocks on Bedford, et. al. Set as desired. */

}

.sqs-gallery-thumbnails, .sqs-gallery-design-strip {

display: block !important; /* For promoted gallery blocks on Bedford, et. al. */

}

/* Enable for overlayed bullets */

/*

.sqs-gallery-design-strip {

position: absolute;

top: 0;

left: 50%;

overflow: visible;

z-index: 990;

top: inherit;

bottom: 0;

margin-bottom: 30px;

}

.sqs-wrapper {

margin-left: -50%;

}

*/


TEMPLATE SPECIFIC CSS

BRINE: CREATE KEN BURNS ANIMATION ON GALLERY SLIDER

// Apply animation to banner gallery

@-webkit-keyframes banner-zoom-in-out {

  0% {transform: scale(1.0);}

  100% {transform: scale(1.3);}

}

@-moz-keyframes banner-zoom-in-out {

  0% {transform: scale(1.0);}

  100% {transform: scale(1.3);}

}

@-o-keyframes banner-zoom-in-out {

  0% {transform: scale(1.0);}

  100% {transform: scale(1.3);}

}

@keyframes banner-zoom-in-out {

  0% {transform: scale(1.0);}

  100% {transform: scale(1.3);}

}



.tweak-index-gallery-layout-slideshow.tweak-index-gallery-fixed-height .Index-gallery-item {

  -webkit-animation: banner-zoom-in-out 20s infinite alternate; 

  -moz-animation:    banner-zoom-in-out 20s infinite alternate; 

  -o-animation:      banner-zoom-in-out 20s infinite alternate; 

  animation:         banner-zoom-in-out 20s infinite alternate;

}



BRINE: REPLACE LOGO IMAGE ON PARTICULAR PAGE (ON BOTH DESKTOP & MOBILE). PASTE THIS IN THE ADVANCED SECTION OF THE PAGE. REPLACE THE DESTINATION OF THE IMAGE. DO THIS BY LOADING AN IMAGE ONTO AN UNLINKED PAGE, THEN RIGHT CLICK THE IMAGE AND OPEN IN A NEW TAB TO GET THE ADDRESS.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>

  <script>
    $(function() {$('.Header-branding').find('img').attr('src', 'https://images.squarespace-cdn.com/content/5c9c31a533f3c80001057673/1554133840964-GII485SWI4WAUWG69SPA/1500w')})
    
        $(function() {$('.Mobile-bar-branding').find('img').attr('src', 'https://images.squarespace-cdn.com/content/5c9c31a533f3c80001057673/1554133840964-GII485SWI4WAUWG69SPA/1500w')})
    
  </script>

TREMONT: REPLACE IMAGE ON PARTICULAR PAGE. PASTE THIS IN THE ADVANCED SECTION OF THE PAGE. REPLACE THE DESTINATION OF THE IMAGE. DO THIS BY LOADING AN IMAGE ONTO AN UNLINKED PAGE, THEN RIGHT CLICK THE IMAGE AND OPEN IN A NEW TAB TO GET THE ADDRESS.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

<script>

$(function() {$('.Header-branding').find('img').attr('src', 'https://images.squarespace-cdn.com/content/5c87a41daf46830f79adad90/1553929422215-X3TL8UYP7QB06C838PDL/')})

</script>



TREMONT

//Turn home page animation off on mobile

@media screen and (max-width: 500px) {

.tweak-index-slideshow-animation .collection-images .image-container img, .tweak-index-slideshow-animation .collection-images .image-container .sqs-video-background {

animation: none !important;

}}



//Set min size for body font

@media screen and (max-width: 1000px) {

p {

font-size: 16px;

line-height: 1.6em;

}}

@media screen and (min-width: 1500px) and (max-width: 5000px) {

p {

font-size: 28px;

line-height: 1.6em;

}}



//Change color of line

.sqs-block-horizontalrule hr {

background-color: #999;

}



//Add background color to footer

.site-footer {

background-color: #eee !important;

}



ADIRONDACK

// Remove text align throughout site
body .contact-wrapper, body #contactInfo, body #mobile-navigation, body .outer-wrapper {
  text-align: left !important;
}

// Remove folder nav on project pages
.folder-nav {
display: none;
}

// Change behavior of cursor when hovering over menu icon on desktop
#desktopMenu {
  cursor: default !important; }

FLATIRON

// Remove unnecessary bottom margin on mobile

@media (max-width: 450px) {
section#container {
margin-bottom: 0px !important;
}}

 

// Change font style and size of image captions

.image-caption >p strong {

  font-size: 20px !important;

  line-height: 20px !important;

  font-family: sans-serif; /*note that other fonts can be used by correctly pointing squarespace to the right font family name*/

  font-weight: 200 !important;

}

 

// Change size of text in desktop footer

.footer-block .sqs-block-content >p {

  font-size: 15px !important;

}

 

// Remove bottom border upon hover from "X" in lightbox

.sqs-lightbox-close{

  border-bottom: none !important;

}

 

// Disable gallery slide on gallery hover, yet enable for arrows and buttons on home page gallery
.Index-gallery-wrapper, .gallery-root {
  pointer-events: none;
}
.gallery-root a, .Index-gallery-indicators, .Index-gallery-control, .Index-gallery-control--left {
   pointer-events: initial;
  }


APPLY ANIMATION TO BRINE GALLERY SLIDER

// Apply animation to banner gallery

@-webkit-keyframes banner-zoom-in-out {
  0% {transform: scale(1.0);}
  100% {transform: scale(1.3);}
}

@-moz-keyframes banner-zoom-in-out {
  0% {transform: scale(1.0);}
  100% {transform: scale(1.07);}
}

@-o-keyframes banner-zoom-in-out {
  0% {transform: scale(1.0);}
  100% {transform: scale(1.07);}
}

@keyframes banner-zoom-in-out {
  0% {transform: scale(1.0);}
  100% {transform: scale(1.07);}
}

@media screen and (min-width:769px) {
.tweak-index-gallery-layout-slideshow.tweak-index-gallery-fixed-height .Index-gallery-item .Index-gallery-item-image img {
  -webkit-animation: banner-zoom-in-out 6s infinite alternate; 
  -moz-animation:    banner-zoom-in-out 6s infinite alternate; 
  -o-animation:      banner-zoom-in-out 6s infinite alternate; 
  animation:         banner-zoom-in-out 6s infinite alternate;
  }}

STYLE MOBILE HEADER TO ACCOMMODATE ROTATING TAGLINE, INSPIRED BY DANE AUSTIN DESIGN WEBSITE

//Style header and gallery upper left positioned image title on mobile

//Yian

//Change size of home page tagline font on 4 inch mobile screen
@media screen and (max-width: 374px) {
  h2.Index-gallery-item-content-heading {
    font-size: 25px;
    letter-spacing: .1em;
}
  }

//Style tagline banner on small screens in order to align with logo
@media screen and (max-width: 769px){
.Index-gallery-item-content {
  padding-left: 10px /*may need to adjust this number if mobile logo has some extra space on the left hand side */ ;
padding-top: 0px;
padding-bottom: 15px;
margin-top: 0px !important;
  }
  
  .Index-gallery-item-content-heading {
    padding-left: 13px;
  }
}

//Style tagline banner on medium screens in order to align with logo
@media screen and (min-width: 769px) and (max-width: 1920px) {
  .Index-gallery-item-content{ padding-left: 13px;
  }}

//Limit width of tagline banner opacity so that the words align with the logo on desktop
.Index-gallery-item-content-heading {
  max-width: 1986px;
  margin-left: auto;
  margin-right: auto;
}

//Adjust top margin above home page tagline banner on medium and large screens
@media screen and (min-width: 769px) {
  .Index-gallery-item-content {
    margin-top: 0px !important;
    padding-top: 60px;
    padding-bottom: 30px;
  }
}

//Make tagline banner opacity run across the page
.Index-gallery-item-content {
  width: 100%;
}





//Joseph
// Basically what this does (I believe) is to adjust the positioning of certain elements to create the desired effect

@media screen and (max-width: 768px) {
    .homepage .Mobile.loaded .Mobile-bar.Mobile-bar--top {
        background: rgba(23,23,23,.17);
        margin-bottom: -80px;
        z-index: 9999;
        position: relative;
    }
  
    .homepage .Mobile.loaded .Mobile-bar.Mobile-bar--top {
        background: rgba(23,23,23,.17);
        margin-bottom: -50px;
        z-index: 2;
        position: relative;
    }
    .homepage.tweak-index-gallery-layout-slideshow.tweak-index-gallery-fixed-height .Index-gallery-wrapper .Index-gallery-item-content {
        top: 80px;
    }
    
    .homepage.tweak-index-gallery-layout-slideshow.tweak-index-gallery-transition-fade .Index-gallery {
    height: 100vh;
}

.homepage.tweak-index-gallery-layout-slideshow.tweak-index-gallery-transition-fade .Index-gallery .Index-gallery-wrapper {
    height: 100vh !important;
}

.homepage.tweak-index-gallery-layout-slideshow.tweak-index-gallery-transition-fade .Index-gallery .Index-gallery-wrapper .Index-gallery-item {
    height: 100vh !important;
}
  .homepage .Site.loaded {
    margin-top: -80px;
}
}
@media screen and (max-width: 399px) {
  .homepage .Site.loaded {
    margin-top: 0;
}
.homepage.tweak-index-gallery-layout-slideshow.tweak-index-gallery-fixed-height .Index-gallery-wrapper .Index-gallery-item-content {
        top: 50px;
    }
}

Cookie CSS styling

// Cookie Notice

.cookie-notice {

display: block !important;  

background: hsla(43, 9%, 94%, 0.98) !important;

  border: 1px solid #ddd !important;

  -webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  border-radius: 0px;

  color: hsl(0, 1%, 45%) !important;

  width: 250px !important;

  font-family: proxima-nova !important;

  font-size: 100% !important;

  letter-spacing: 0.02em;

  line-height: 1.6em;

  position: fixed !important;

  top: auto !important;

  bottom: 30px !important;

  left: auto !important;

  right: 30px !important;

  padding: 30px !important;

}

.cookie-notice a {

  color: hsl(0, 1%, 45%);

}

.cookie-notice .accept {

  display: block;

  width: 200px;

  padding: 10px !important;

  background: hsla(43, 9%, 94%, 0.98);

  color: #0b002b;

  font-family: proxima-nova;

  font-weight: 600;

  text-transform: uppercase;

  font-size: 90%;

  letter-spacing: 0.1em;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  margin-top: 20px !important;

  margin-left: 0px !important;

  border-top-style: none !important;

  border-right-style: none !important;

  border-bottom-style: none !important;

  border-left-style: none !important;

  border: 2px solid #0b002b !important;

}

@media only screen and (max-width: 640px) {

  .cookie-notice {

  width: 250px;

  font-size: 70% !important;

  top: auto !important;

  bottom: 10px !important;

  left: auto !important;

  right: 10px !important;

  padding: 20px !important;

}

}

 


CSS SYNTAX

!important – this prioritizes a CSS rule, helping it to over-ride a conflicting rule.