=========================================
CLEAN INFINITE SLIDER – 7.1 GRID SIMPLE
Section ID: 6996d4273a3c7714a269bac0
========================================= */
/* Speed controls */
:root {
--logo-speed: 40s;
--logo-speed-mobile: 60s;
}
/* Hide overflow at section level */
section[data-section-id="6996d4273a3c7714a269bac0"] {
overflow: hidden;
}
/* Clip inside content wrapper (THIS fixes inset) */
section[data-section-id="6996d4273a3c7714a269bac0"] .content-wrapper {
overflow: hidden;
position: relative;
}
/* Force horizontal layout */
section[data-section-id="6996d4273a3c7714a269bac0"] .gallery-grid {
display: flex !important;
flex-wrap: nowrap !important;
}
/* Animated track */
section[data-section-id="6996d4273a3c7714a269bac0"] .gallery-grid-wrapper {
display: flex !important;
width: fit-content;
animation: logo-scroll var(--logo-speed) linear infinite;
}
/* Pause on hover */
section[data-section-id="6996d4273a3c7714a269bac0"]:hover .gallery-grid-wrapper {
animation-play-state: paused;
}
/* Logo items */
section[data-section-id="6996d4273a3c7714a269bac0"] .gallery-grid-item {
flex: 0 0 auto !important;
width: 140px !important;
margin-right: 80px !important;
filter: grayscale(100%);
opacity: 0.9;
transition: filter 0.5s ease, opacity 0.5s ease;
}
/* Colour on hover */
section[data-section-id="6996d4273a3c7714a269bac0"] .gallery-grid-item:hover {
filter: grayscale(0%);
opacity: 1;
}
/* Infinite animation */
@keyframes logo-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Slower mobile */
@media (max-width: 767px) {
section[data-section-id="6996d4273a3c7714a269bac0"] .gallery-grid-wrapper {
animation: logo-scroll var(--logo-speed-mobile) linear infinite;
}
}
/** Make title font color #ffbb2a * From: Robo-Will **/
section[data-section-id="6995fa8c866a5f4d405b4e24"] {
.list-item-content__title {
color: #ffbb2a;
}
}
/* Target the specific button block */
#block-yui_3_17_2_1_1771932189526_13105 .sqs-button-element--primary {
position: relative;
overflow: hidden;
z-index: 1;
}
/* Create the sliding white layer */
#block-yui_3_17_2_1_1771932189526_13105 .sqs-button-element--primary::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background-color: #ffffff;
transition: width 0.4s ease;
z-index: -1;
}
/* Animate on hover */
#block-yui_3_17_2_1_1771932189526_13105 .sqs-button-element--primary:hover::before {
width: 100%;
}
/* Optional: change text color on hover for contrast */
#block-yui_3_17_2_1_1771932189526_13105 .sqs-button-element--primary:hover {
color: #000000 !important;
}
/*standard code*/
/* Removes hyperlinks and sets basic styling */
a {
text-decoration: none !important;
position: relative;
display: inline-block;
transition: opacity 0.3s ease, color 0.3s ease-in-out !important;
}
/* Underline effect using pseudo-element */
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #FFFFFF;
z-index: 1;
transition: width 0.3s ease;
}
/* Hover effects */
a:hover {
opacity: 0.7 !important;
}
a:hover::after {
width: 100%;
}
/* Mobile header menu font adjustments */
@media screen and (max-width: 767px) {
.header-menu-nav-item a {
font-size: 20px;
font-weight: 300;
}
}
/* Float images left with text wrapping */
.sqs-block-image img.align-left {
float: left;
margin: 0 20px 20px 0;
max-width: 50%;
}
/*change mobile menu font size*/
@media screen and (max-width: 767px) {
.header-menu-nav-item a {
font-size: 20px;
font-weight: 300;
}
}
/* reduces h1 font size on mobile */
@media only screen and (max-width: 640px) {
h1 {
font-size: 1.8em; }
}
/*zoom effect to images on hover*/
.sqs-block-image img {
transition: ease-in-out 1.6s !important;
}
.sqs-block-image:hover img {
transform: scale(1.15) !important;
}
Another version
/* Image Magnify on Hover for Blog Summary Blocks */
.summary-item:hover .summary-thumbnail img {
transform: scale(1.09);
transition: transform 0.5s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}