Template

Bedford Template, Created by Squarespace

Bedford

The Bedford family includes: Bedford, Anya, Bryant, and Hayden's features and versatility make them a great option for a variety of sites, from nonprofits to real estate listings to wedding announcements. Special customizable banners and buttons, sidebar navigation, and a scrolling Index Page put the focus on your products, mission, or event details. 

 Sitewide Styles

These styles are added to the Custom CSS section on the design page of your Squarespace Admin Panel.

Headings

/* Heading 2*/
h2 { 
    padding-bottom: 20px;
    line-height: 1.5em;
    border-bottom: 1px solid #DEDEDE;
    font-size: 20px;
    font-weight: 600;
}
/* Heading 3 */
h3 {
  font-weight: 100; 
  font-size: 20px; 
  text-transform: capitalize; 
  line-height: 1.5em; 
  margin-bottom: 20px;
  }

Horizontal Divider Lines

/** Horizontal Lines **/
hr {
margin: 0 !important;
/** background-color: gold !important; **/
}

Links

/** Active Link **/
.active a {
  border-bottom: 1px solid white; 
}

Tagline Heading Banners

Desktop Styles

/** Tagline Heading Desktop **/
@media only screen and (min-width: 760px) {
  .tagline {
    font-weight: 800;
    font-size: 60px;
    line-height: 1em;
    max-width: 650px;
}
/** Tagline SubHeading Desktop **/
.tagline-short {    
    margin-top: -30px; 
    line-height: 1.2em;
    font-weight: 300;
    font-size: 30px;
    max-width: 450px;
}
/** Tagline Heading Banner Spacing **/
#about-intro, #home-intro, 
#work-intro, #contact-intro {
    padding: 0px 32px;
    margin-top: -90px;
    margin-bottom: -40px;
}

Mobile Styles

@media only screen and (max-width: 760px) {
/** Tagline Heading Mobile **/
.tagline {
    font-weight: 800;
    font-size: 25px;
    line-height: 1em;
    max-width: 650px;
}
/** Tagline SubHeading Mobile **/
.tagline-short {    
    margin-top: -10px; 
    line-height: 1.2em;
    font-weight: 300;
    font-size: 18px;
    max-width: 450px;
}
/** Tagline Heading Banner Spacing Mobile **/
#about-intro, #home-intro, 
#work-intro, #contact-intro {
    padding: 0px 32px;
    margin-top: -50px !important;
    margin-bottom: -10px !important;
}  

Navigation Bars

/** Hide Header Nav on Scroll **/
.show-on-scroll-wrapper.show #header {visibility: hidden;}

Images

/** Image Style **/
.sqs-block-image img {}
.sqs-block-image img:hover {}
/** Image Blocks **/
.sqs-block.image-block {
   padding: 5px !important;
 } 

.sqs-block.image-block:hover {}
/** Gallery Image Styling **/
a.image-slide-anchor {}

Page Styles

These styles are added to the Code Injection block on the highest level page or index. They are modified to fit each individual page.

Index Page Sections

  /* Section Background Styling */
  #flip-bulb-product {background-color: #f3f3f3 !important;}

This will allow you to declare a specific color or background image for each individual section of an index page. You will need to give each section a URL Slug then reference that slug using #url-slug in the style declaration.

Image Captions

  /*Image Caption Styling */
  .image-caption p {color: #9C20CD !important;}

This allows you to change the style of image captions on a page level. You can add font size, color, and other styling. If it is not working, try adding !important; after the rule.

 Homepage Styles

These are styles built specifically for how the homepage looks.

/** Homepage Styles **/
  #home-1, #home-3, #home-featured-projects, #work-projects, #home-contact {
    background-color: #f3f3f3 !important;
}
  .blockquote {font-size: 30px; line-height: 40px; font-weight: 300;}
  
  h3 {font-weight: 100; font-size: 20px; text-transform: uppercase; line-height: 1.5em; margin-bottom: 20px;
  }
/** Home Work Gallery **/
  body:not(.sqs-edit-mode-active) {
    #page-body-wrapper {
      overflow-x: hidden;
    }
    #block-yui_3_17_2_29_1491183060550_17586 {
      padding: 17px 0;
      width: 100vw;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
/* GALLERY GRID
 ------------------------------------------------*/
 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
     display: none;
     z-index: 100;
     left: 0;
     right: 0;
     margin-left: auto;
     margin-right: auto;
     position: absolute;
     text-align: center;
     top: 50%;
     transform:             translateY(-50%);
     cursor: pointer;
      pointer-events: none;
      transition: opacity .50s ease-in-out;
    -moz-transition: opacity .50s ease-in-out;
    -webkit-transition: opacity .50s ease-in-out;
 }
 
 .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor {
 
      transition: opacity .50s ease-in-out;
    -moz-transition: opacity .50s ease-in-out;
    -webkit-transition: opacity .50s ease-in-out;
 }
 
 .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor:hover {
 }

 .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor:before{
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, .0);
         transition: all .25s ease-in-out;
   }

 .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor:hover::before {
   background-color: rgba(0, 0, 0, .5);
         transition: all .25s ease-in-out;
 }
 
 .slide .margin-wrapper:hover .image-slide-title {
   display: inline-block;
   color: white;
   font-weight: 600;
   font-size: 16px;
 }