SITE WIDE
To clean up CSS Coding in Squarespace CSS: CMD + A (select all), shift + tab (clean up)
/* H4 */
h4 { font-family: montserrat;
font-weight: 400;
font-size: 1em;
font-style: normal;
line-height: 1.8em;
letter-spacing: .3em;
text-transform: uppercase;
}
/* Remove auto-hypenate */
h1, h2, h3, p {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}
/*Horizontal Line */
hr {
background-image: linear-gradient(to right, #ffdd15, #F55536);
padding: 3px;
}
/*Change Heading to H4 font */
BlockID# h1 { —heading-1-size-value: var(—heading-4-size-value); }
https://www.youtube.com/watch?v=djvfVT0TfPM
/* Hover Effects */
/* Change text link to italic on hover */
p2 a:hover {
font-style: italic;
}
/* images */
.sqs-block-image:hover img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
/* custom bullets */
ul[data-rte-list] li>*:first-child::before {
content: "✓";
}
OR to add an image
/* custom bullets */
section[data-section-id="6597288c44732f1e7a5421bf"] ul li {
height: 60px;
}
section[data-section-id="6597288c44732f1e7a5421bf"] ul[data-rte-list] li>*:first-child::before {
content: "";
}
section[data-section-id="6597288c44732f1e7a5421bf"] .sqs-block-content li:before {
content: "";
display: block;
height: 25px;
position: relative;
top: 42px;
left: -40px;
width: 25px;
background-image: url(IMAGE URL HERE);
background-size: contain;
margin-right: 5px;
}
/* Hide Announcement bar close */
.sqs-announcement-bar-close {display: none}
Fonts
/* H4 */
h4 {
font-family: montserrat;
font-weight: 400;
font-size: 1em;
line-height: 1.8em;
letter-spacing: .3em;
text-transform: uppercase;
}
/* Remove auto-hypenate */
h1, h2, h3, p {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}
/* Hover Effects */
/* Change text link to italic on hover */
p2 a:hover {
font-style: italic;
}
/*OR ADD a shape behind text box and use this code:
section[data-section-id="651e0a1874c6cf321fdee9eb"] {
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}}*/
/** Line Outline for List Boxes **/
section[data-section-id="651e09495e6364553861d264"]{.list-item[data-is-card-enabled="true"]{
border-top: 8px solid #225265;
border-bottom: 8px solid #E2504B;
}
}
//* Image Float *//
#block-c34b1df7503a474c1c67 {
transform: translateY(-10%);
z-index: 10;
}
// Vertical Text for Campaign 6 //
/** vertical text **/
@media only screen and (min-width: 780px){#block-ab016e2b53e285d1f113, #block-yui_3_17_2_1_1697415057606_205786{ h4 {
transform: rotate(270deg);
margin-right: 3vw;
top: 7vw;
position: absolute;
right: 0;
font-size: 0.8em;
z-index:98;
} }}
/* Rotate text */
section[data-section-id="64e7bef518d18811e3d26601"]{
@media screen and (min-width: 640px) { h4 { transform: rotate(-90deg);
margin-left: -5vw;
position: relative;
right: 10px;
font-size: .9em;
} }}
Lines
/*Horizontal Line */
hr {
background-image: linear-gradient(to right, #ffdd15, #F55536);
padding: 3px;
}
/* Line Rotation */
.vertical-line {
background: #E2504B;
width: 2px;
height: 300px;
margin: 0 auto;
}
/*OR ADD a shape behind text box and use this code:
section[data-section-id="651e0a1874c6cf321fdee9eb"] {
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}}
/** Line Outline for List Boxes **/
section[data-section-id="651e09495e6364553861d264"]{.list-item[data-is-card-enabled="true"]{
border-top: 8px solid #225265;
border-bottom: 8px solid #E2504B;
}}
Images
/* images */
.sqs-block-image:hover img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
//* Image Float *//
#block-c34b1df7503a474c1c67 {
transform: translateY(-10%);
z-index: 10;
}
// End Climate Change //
// Priorities Section on #5 //
section[data-section-id="652dcb48cf9d5400e81c2cd0"]{
.sqs-background-enabled:hover {
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}}
// END Issues Section on #5 //
Gradients
/* Gradient Overlay to Header Image */
@media only screen and (min-width:750px) {section[data-section-id="6597288c44732f1e7a5421b6"] .section-background-overlay {
opacity: .75 !important;
background: linear-gradient(to right,#fff,transparent);
}}
/* Change Direction of Gradient on Mobile */
@media only screen and (max-width:750px) {section[data-section-id="6597288c44732f1e7a5421b6"] .section-background-overlay {
opacity: .75 !important;
background: linear-gradient(to top,#fff,transparent);
}}
Hover Effects
/* Hover Effects */
/* Change text link to italic on hover */
p2 a:hover {
font-style: italic;
}
/* list items */
.list-item:hover .list-item-content__button {
background-color: #353C3C!important;
}
.list-item:hover {
transform: scale(1.05) !important;
transition: all ease-in-out .2s !important;
background-color: #DCEFF5!important;
}
.list-item:hover .list-item-media img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
/* images */
.sqs-block-image:hover img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
// Remove Slash From Folder Nav //
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item a:after {
content: "" !important;
}
// Remove Active Nav Line //
.header-nav-item--active a {
background-image: none !important;
}