Tutorial Videos
Website Fact Sheet
WEBSITE FONTS
Headings—Montserrat
Paragraphs—Montserrat
TECH SUPPORT
30 days free tech support after launch is included in your website package.
After that, Squarespace tech support is a great free resource—they have lots of videos in the Help Section, 24/7 email support, and Live Chat, which is usually my preference.
SQUARESPACE HELP
support.squarespace.com
online videos, help guide, forum, webinars
Live Chat:
Monday-Friday 4am to 8pm Eastern ( 1am to 5pm Pacific )
Email
24/7
WEBSITE MAINTENANCE
Please keep in mind, technology is constantly evolving and your website will likely need some periodic maintenance and I will be glad to help you. Please email me and I’ll do my best to get you on my schedule as quickly as possible.
Thank you for trusting me with your website, I really enjoyed working with you!
Kristine
kristine@twistdesign.biz
206.443.7661
CSS
/* Services Grid */
#siteWrapper section[data-section-id="68489e487ae4a848b7479438"] .user-items-list-simple {
--transition: opacity .3s ease 0s;
padding: 0;
.list-item {
position: relative;
}
//fade to white
.list-item:before {
content: '';
position: absolute;
inset: 0;
background: #fff;
z-index: 2;
opacity: .0;
transition: var(--transition)!important;
}
//black overlay
.list-item:after {
content: '';
position: absolute;
inset: 0;
background: #000;
z-index: 1;
opacity: .18;
}
.list-item-media {
margin-bottom: 0!important;
}
.list-item-content {
position: absolute;
inset: 0;
z-index: 3;
justify-content: flex-end;
padding: 8%;
padding-bottom: 15%;
}
.list-item-content__text-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.list-item-content :is(h2,p) {
color: #fff;
text-align: left;
width: 100%;
display: flex;
align-items: center;
line-height: 1.3;
}
.list-item-content__title {
color: #1470af!important;
opacity: 0!important;
}
.list-item-content__title, .list-item-content__description {
display: grid;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
margin-top: 0!important;
transition: var(--transition)!important;
width: 100%;
}
.list-item-content__button-wrapper, .list-item-content__button-container {
position: absolute;
inset: 0;
margin-top: 0!important;
}
.list-item-content__button {
position: absolute;
inset: 0;
border-radius: 0;
opacity: 0!important;
}
.list-item:hover {
&:before {
opacity: 1;
}
.list-item-content__title {
opacity: 1!important;
}
.list-item-content__description {
opacity: 0!important;
}
}
@media screen and (max-width:767px){
.list-item .list-item-content .list-item-content__title {
opacity: 0!important;
}
.list-item .list-item-content .list-item-content__description {
opacity: 1!important;
align-items: end;
}
.list-item:before {
opacity: 0!important;
}
.list-item-content__text-wrapper {
max-width: 80%;
}
.list-item-content :is(h2,p) {
align-items: flex-end;
}
}
}
/* Remove underline and set smooth medium-weight hover for centered nav */
header .header-nav-item a {
text-decoration: none !important;
font-weight: normal;
transition: font-weight 0.3s ease;
}
header .header-nav-item a {
text-decoration: none !important;
font-weight: normal;
transition: color 0.4s ease, font-variation-settings 0.4s ease;
}
/* Hover: medium weight + blue color */
header .header-nav-item a:hover {
font-variation-settings: "wght" 500 !important;
color: #1470AF !important;
text-decoration: none !important;
}
//EXTEND NAVIGATION WIDTH//
.header-nav {
width: 90% !important;
flex: 1 1 90% !important;
}
.header-title-nav-wrapper {
flex: 1 0 98% !important;
}
//Linked Text to White and elmiinate the underline//
footer a {
color: #fff !important;
text-decoration: none !important;
transition: opacity 0.3s ease;
}
footer a:hover {
opacity: 0.5 !important;
}
/* Default form button style */
input[type="submit"],
button[type="submit"] {
background-color: transparent !important;
color: #1470AF !important;
border: 2px solid #1470AF !important;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hover style to match primary button */
input[type="submit"]:hover,
button[type="submit"]:hover {
background-color: #1470AF !important;
color: #fff !important;
}
/* ROUND BLOG THUMBNAILS IN GRID LAYOUT */
/* Blog - Rounded Corners */
.blog-basic-grid .image-wrapper {
border-radius: 20px;
}
//*Videos to Vertical in Blog page Only//
/* Vertical video ONLY on the Blog page */
.page-blog .sqs-native-video .native-video-player {
padding-bottom: 100% !important; /* 1:1 ratio */
height: auto !important;
}
/* Fix horizontal videos on the Tutorials page only */
.page-tutorials .sqs-native-video .native-video-player {
padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
height: auto !important;
}
/* Optional deeper reset for extra vertical space */
.page-tutorials .sqs-native-video {
padding-bottom: 0 !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
}
/*SERVICES PAGE HOVER—3 Layers */
/* make "top" layer (blue text on white) transparent unless on hover */
#block-86aadc06cbf5df86037b,
#block-980dabfe1242b92dba51 {
opacity: 0!important;
transition: .3s ease!important}
#block-86aadc06cbf5df86037b:hover,
#block-980dabfe1242b92dba51:hover {
opacity: 1!important}
/* CHANGE FONT SIZE MOBILE MENU*/
.header-menu-nav-item a {
font-size: 25px;
}
/*MOBILE ADD BACKGROUND IMAGE*/
.header-menu .header-menu-bg{
background-image: url(https://static1.squarespace.com/static/683665bee528116006d520a2/t/6848d0f853922f26690993ad/1749602552869/mobile-menu-background.png);
background-size: cover;
}
/* K notes - CSS for Services + Fees hover effect */
/* make "top" layer (blue text on white) transparent unless on hover */
#block-yui_3_17_2_1_1749346849504_262333,
#block-18f09760abac532fd3f0, #block-2dce5a71b3aed7f45c23, #block-c1e30e95b756da0e3bbe,#block-93e5e7e8d8f1cd06bc57, #block-a0d5a71d4ea47d6ecb03 {
opacity: 0!important;
transition: .6s ease!important}
#block-yui_3_17_2_1_1749346849504_262333:hover,
#block-18f09760abac532fd3f0:hover, #block-2dce5a71b3aed7f45c23:hover, #block-c1e30e95b756da0e3bbe:hover, #block-93e5e7e8d8f1cd06bc57:hover,#block-a0d5a71d4ea47d6ecb03:hover {
opacity: 1!important}