Beyondspace

I check that there is an event that adds a new class and set the style of transition for this class. In order to overwrite this blink style, you can try adding to Home > Design > Custom css
#collection-588a8923b3db2b265e893d25 img { transition: none; } Hope it makes sense.
Support me by pressing 👍 if this useful for you

My testing

Try adding to Home > Design > Custom Css
[data-header-style="dynamic"].header.shrink{ background: #ccc; } Let me know how it works on your site
Support me by pressing 👍 if this useful for you

Try adding to Home > Design > Custom Css
.header-nav-folder-title + .header-nav-folder-content { margin-top: 15px; } Hope it can helo

You can try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { [data-folder="root"] { display: none; } [data-folder="root"] + div { transform: translatex(0); will-change: transform; } [data-folder="root"] + div .header-menu-nav-folder-content > .header-menu-controls { display: none; } } I also hide the back button on mobile

Try adding to Home > Design > Custom Css
section[data-section-id="62df6f1bf1cc0d19dc8d3cf5"] .sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) { word-wrap: normal; } Let me know how it works

Try adding to Home > design > Custom Css
header#header [href*="wa.me"] { display: flex; align-items: center; } header#header [href*="wa.me"]:hover:before { color:green; } Let me know how it works on your site

I try using the pseudo element to replace the cart title
#cart .empty-message { visibility: hidden; } #cart .empty-message:before { content:'The Custom empty cart message'; visibility: visible; } #cart .cart-title { visibility: hidden; } #cart .cart-title:before { content: 'Shopping cart change' ; visibility: visible; }  

Try adding to Home > Design > Custom Css to set the same width for three buttons:
#block-yui_3_17_2_1_1658339303941_1887 + .row .sqs-block-button-container a { min-width: 200px; }  

Setting color style for each button via the following code
#block-yui_3_17_2_1_1658339303941_3946 a { background: red; } #block-yui_3_17_2_1_1658339303941_5356 a { background: blue; } #block-yui_3_17_2_1_1658339303941_3003 a { background: green; } To get the right id for block you can use the following extension: Squarespace Id finder
How to use it: https://recordit.co/kUIH4uco0b

Hope it makes sense

You can try
.search-input { outline: none; }  

Try adding to Home > Design > Custom Css
.ProductItem-summary .product-quantity-input,.ProductItem-details .product-variants { float: left; } .ProductItem-summary .product-quantity-input { margin-left: 5px; /*space between quantity and variants select*/ } .ProductItem-summary .product-quantity-input input { padding-top: 9px !important; padding-bottom: 9px !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 100%; } Not sure what you mean on mobile. Can you describe it more detail?

My testing

You can try adding to Home > Design > Custom Css
/*general setting for second image*/ section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item .grid-image:after { content:''; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; background-repeat: no-repeat; background-size: contain; background-position: center center; } section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item:hover .grid-image-inner-wrapper { opacity: 0; } /*set url for each item*/ section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item:first-child .grid-image:after { background-image: url('https://images.unsplash.com/photo-1658140917228-129162d2a5b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); } section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item:nth-child(2) .grid-image:after { background-image: url('https://images.unsplash.com/photo-1658140917228-129162d2a5b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); } Let me know how it works on your site

This effect requires css and javascript code to load the landing page? What is your plan?

This effect requires css and javascript code to load the landing page? What is your plan?

You can try adding Home > Design > Custom Css
.newsletter-form-button:hover .newsletter-form-button-label { color: #000 !important; } Let me know how it works on your site

Try adding to Home > Design > Custom Css
.Mobile-overlay-close { z-index: 999; } .Mobile-overlay-menu { width: 100%; } .Mobile-overlay-nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; } Let me know how it works on your site

Hide time on https://carillon-dachshund-d8bb.squarespace.com/events, Kindly apply this code
#collection-625f7badcd91582ddb40420d .eventlist-excerpt { display: none; } Let me know how it works on your site

For the mobile navigator, you can try the following one
#header .header-menu-nav-item:nth-child(8) { display: none; }  

Try the following Css Code
section[data-section-id="623bd056fda65c46ad132528"] { padding-left: 0 !important; padding-right: 0 !important; } section[data-section-id="623bd056fda65c46ad132528"] .section-background { left: 0 !important; right: 0 !important; } Let me know how it works

You can use this extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en
to find the right id for section/page
Try the following rule to select the class within a section/page
#sectionID (or #PageID) .class { /*Your specific style*/ } Hope it help

You can try the following code
/*prevent hover effect on mobile*/ @media only screen and (max-width: 767px) { #collection-6169c831ec5ab773cfc058ad .portfolio-hover[data-animation="fade"] .portfolio-hover-bg[data-active="true"] .portfolio-hover-bg-img { opacity: 0; visibility: hidden; } } Let me know how it works on your site

Try adding to Home > Design > Custom Css
.Mobile-overlay-close { z-index: 999; } .Mobile-overlay-menu { width: 100%; } .Mobile-overlay-nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; } Let me know how it works on your site

You can try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1646280735025_11817, #block-yui_3_17_2_1_1646280735025_17090 { width: 50%; margin: 0 auto; } } decrease the percentage until it fits your need
Let me know how it works on your site