/* ============================================
FIT KIT V2 HOMEPAGE STYLES
============================================ */
/* --- Phase 1: Hero Slider --- */
.et_pb_fullwidth_slider .et_pb_slide .et_pb_slide_overlay_container {
background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.15) 100%) !important;
}
.et_pb_fullwidth_slider .et_pb_slide_description {
text-align: left !important;
max-width: 650px;
padding-left: 5%;
margin: 0;
}
.et_pb_fullwidth_slider .et_pb_slide_title {
font-family: 'Poppins', sans-serif !important;
font-size: 52px !important;
font-weight: 700 !important;
letter-spacing: -0.5px;
line-height: 1.15;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.et_pb_fullwidth_slider .et_pb_slide_content,
.et_pb_fullwidth_slider .et_pb_slide_content p {
font-size: 20px !important;
color: #FFFFFF !important;
opacity: 1 !important;
max-width: 540px;
line-height: 1.7;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
body #page-container .et_pb_button,
body #page-container .et_pb_fullwidth_slider .et_pb_slide .et_pb_button,
body .et_pb_section .et_pb_button,
.et_pb_slider .et_pb_button,
.et_pb_slide .et_pb_button {
text-transform: none !important;
letter-spacing: 0.5px !important;
font-size: 16px !important;
font-weight: 700 !important;
padding: 16px 48px !important;
min-height: 54px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
transition: all 250ms ease !important;
box-sizing: border-box !important;
}
body #page-container .et_pb_button:hover,
body .et_pb_section .et_pb_button:hover,
.et_pb_slider .et_pb_button:hover,
.et_pb_slide .et_pb_button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(237,117,36,0.4);
}
.et_pb_fullwidth_slider,
.et_pb_fullwidth_slider .et_pb_slide {
min-height: 600px !important;
}
.et_pb_fullwidth_slider .et-pb-controllers a {
background: rgba(255,255,255,0.4) !important;
border: none !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
transition: background 250ms ease;
}
.et_pb_fullwidth_slider .et-pb-controllers a.et-pb-active-control {
background: #ED7524 !important;
}
.et_pb_fullwidth_slider .et-pb-arrow-prev,
.et_pb_fullwidth_slider .et-pb-arrow-next {
opacity: 0.7;
transition: opacity 250ms ease;
}
.et_pb_fullwidth_slider .et-pb-arrow-prev:hover,
.et_pb_fullwidth_slider .et-pb-arrow-next:hover {
opacity: 1;
}
.et_pb_fullwidth_slider .et_pb_slides {
position: relative !important;
}
.et_pb_fullwidth_slider .et_pb_slide {
position: absolute !important;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
z-index: 1;
transform: none !important;
animation: none !important;
transition: none !important;
}
/* Hero slider: black container eliminates white flash between Divi transitions */
.et_pb_section.et_pb_fullwidth_section:first-child,
.et_pb_fullwidth_slider,
.et_pb_fullwidth_slider .et_pb_slides,
.et_pb_fullwidth_slider .et_pb_slider_container_inner,
.et_pb_fullwidth_slider .et_pb_slide,
.et_pb_fullwidth_slider .et_pb_container,
.et_pb_slider .et_pb_slide {
background-color: #000 !important;
}
@media (min-width: 768px) and (max-width: 980px) {
.et_pb_fullwidth_slider .et_pb_slide_title { font-size: 40px !important; }
.et_pb_fullwidth_slider,
.et_pb_fullwidth_slider .et_pb_slide { min-height: 500px !important; }
}
@media (max-width: 767px) {
.et_pb_fullwidth_slider .et_pb_slide_description {
text-align: center !important;
padding-left: 5%; padding-right: 5%;
max-width: 100%;
}
.et_pb_fullwidth_slider .et_pb_slide_description h2.et_pb_slide_title,
.et_pb_fullwidth_slider .et_pb_slide_title,
.et_pb_slider .et_pb_slide_title {
font-size: 28px !important;
line-height: 1.35 !important;
}
.et_pb_fullwidth_slider .et_pb_slide_content { max-width: 100%; font-size: 17px !important; }
.et_pb_fullwidth_slider,
.et_pb_fullwidth_slider .et_pb_slide { min-height: 450px !important; }
}
/* --- Phase 3: Dark Trust Bar --- */
.fks-trust-bar {
display: flex;
justify-content: center;
align-items: center;
max-width: 880px;
margin: 0 auto;
}
.fks-stat {
flex: 1;
text-align: center;
padding: 4px 24px;
}
/* All stat values: same height container so labels align */
.fks-stat {
position: relative;
}
.fks-stat-value {
font-family: 'Poppins', sans-serif;
font-size: 48px;
font-weight: 700;
color: #ED7524;
line-height: 1;
letter-spacing: -1px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(8px);
transition: opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Stars float below the number without affecting other stat alignment */
.fks-stars-below {
display: flex;
justify-content: center;
gap: 2px;
position: absolute;
top: 58px;
left: 0;
right: 0;
opacity: 0;
transition: opacity 600ms ease 500ms;
}
.fks-trust-bar.fks-animated .fks-stars-below {
opacity: 1;
}
.fks-stars-below svg {
width: 13px;
height: 13px;
}
.fks-trust-bar.fks-animated .fks-stat-value {
opacity: 1;
transform: translateY(0);
}
.fks-stat:nth-child(1) .fks-stat-value { transition-delay: 0ms; }
.fks-stat:nth-child(3) .fks-stat-value { transition-delay: 250ms; }
.fks-stat:nth-child(5) .fks-stat-value { transition-delay: 500ms; }
.fks-stat-label {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-top: 14px;
opacity: 0;
transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.fks-trust-bar.fks-animated .fks-stat-label {
opacity: 1;
}
.fks-stat:nth-child(1) .fks-stat-label { transition-delay: 300ms; }
.fks-stat:nth-child(3) .fks-stat-label { transition-delay: 550ms; }
.fks-stat:nth-child(5) .fks-stat-label { transition-delay: 800ms; }
.fks-bar-divider {
width: 1px;
height: 56px;
background: rgba(255,255,255,0.1);
flex-shrink: 0;
opacity: 0;
transition: opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms;
}
.fks-trust-bar.fks-animated .fks-bar-divider {
opacity: 1;
}
/* --- Phase 3: Reviews Section --- */
.cr-reviews-slider {
padding: 0 0 28px;
}
.cr-reviews-slider .slick-list {
padding: 8px 0 16px !important;
}
.cr-reviews-slider .slick-slide > div {
margin: 0 12px;
padding: 14px 20px 12px;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 20px rgba(0,0,0,0.04);
border: 1px solid rgba(237,117,36,0.15);
position: relative;
transition: box-shadow 300ms ease, transform 300ms ease, border-color 300ms ease;
}
/* Compact internal CusRev card spacing */
/* Round corners on inner card and product link frame */
.cr-reviews-slider .cr-review-card-inner {
border-radius: 10px !important;
overflow: hidden;
padding: 10px 14px !important;
}
.cr-reviews-slider .review-product {
border-radius: 8px !important;
}
.cr-reviews-slider .review-product img,
.cr-reviews-slider .cr-product-thumbnail img {
border-radius: 6px !important;
}
.cr-reviews-slider .cr-review-card p,
.cr-reviews-slider .cr-review-card div {
margin-bottom: 2px !important;
}
.cr-reviews-slider .crstar-rating-svg {
margin-bottom: 4px !important;
height: 20px !important;
}
.cr-reviews-slider .cr-rating-product-name {
margin-top: 6px !important;
padding-top: 6px !important;
border-top: 1px solid #f0f0f0;
}
.cr-reviews-slider .cr-product-name-picture img {
max-height: 32px !important;
width: auto !important;
}
.cr-reviews-slider .cr-comment-productname-a {
font-size: 12px !important;
line-height: 1.3 !important;
}
.cr-reviews-slider .woocommerce-review__author {
font-size: 13px !important;
margin-top: 4px !important;
margin-bottom: 1px !important;
}
.cr-reviews-slider .slick-slide > div:hover {
border-color: #ED7524;
box-shadow: 0 0 0 1px #ED7524, 0 8px 32px rgba(237,117,36,0.15);
transform: translateY(-4px);
}
.cr-reviews-slider .slick-slide > div::before {
content: '\201C';
font-family: Georgia, 'Times New Roman', serif;
font-size: 56px;
line-height: 1;
color: rgba(237,117,36,0.08);
position: absolute;
top: 0;
left: 12px;
pointer-events: none;
}
.cr-reviews-slider .slick-dots {
bottom: -20px !important;
}
.cr-reviews-slider .slick-dots li {
margin: 0 3px !important;
}
.cr-reviews-slider .slick-dots li button:before {
color: #ddd !important;
font-size: 8px !important;
opacity: 1 !important;
}
.cr-reviews-slider .slick-dots li.slick-active button:before {
color: #ED7524 !important;
opacity: 1 !important;
}
.cr-reviews-slider .slick-prev,
.cr-reviews-slider .slick-next {
width: 44px !important;
height: 44px !important;
background: #ED7524 !important;
border-radius: 50% !important;
box-shadow: 0 2px 10px rgba(237,117,36,0.3) !important;
z-index: 2;
transition: box-shadow 250ms ease, transform 250ms ease, background 250ms ease;
}
.cr-reviews-slider .slick-prev:hover,
.cr-reviews-slider .slick-next:hover {
background: #d66a1f !important;
box-shadow: 0 4px 16px rgba(237,117,36,0.4) !important;
transform: scale(1.08);
}
.cr-reviews-slider .slick-prev:before,
.cr-reviews-slider .slick-next:before {
color: #fff !important;
font-size: 18px !important;
}
/* Trust bar responsive */
@media (max-width: 767px) {
/* Inverted triangle: 4.8 on top, 700+ and 44 side by side below */
.fks-trust-bar {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 16px 0;
justify-items: center;
}
/* Hide dividers (child 2 and 4) */
.fks-bar-divider { display: none !important; }
/* 4.8 stat (child 3 in DOM: stat, divider, STAT) spans full width, ordered first */
.fks-trust-bar > :nth-child(3) {
grid-column: 1 / -1;
order: -1;
}
/* 700+ (child 1) left column */
.fks-trust-bar > :nth-child(1) { grid-column: 1; order: 1; }
/* 44 (child 5) right column */
.fks-trust-bar > :nth-child(5) { grid-column: 2; order: 1; }
.fks-stat { padding: 0; }
.fks-stat-value { font-size: 36px; height: auto; }
.fks-stat-label { margin-top: 4px; font-size: 10px; }
.cr-reviews-slider .slick-slide > div {
margin: 0 6px;
padding: 16px 16px 12px;
}
/* H2 line-height fix: prevent descender/ascender collision on wrap */
.et_pb_text h2 {
line-height: 1.35 !important;
}
/* Kill decorative quote on mobile */
.cr-reviews-slider .slick-slide > div::before {
display: none !important;
}
/* Break slider out of Divi row constraints */
.cr-reviews-slider {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
/* Cards: full width, generous padding, gap between slides */
.cr-reviews-slider .slick-slide > div {
margin: 0 12px !important;
padding: 24px !important;
}
.cr-reviews-slider .cr-review-card-inner {
padding: 20px !important;
}
/* Prevent clipping */
.cr-reviews-slider .slick-list {
padding: 8px 0 !important;
overflow: visible !important;
}
}
/* --- Phase 2: Shop by Category Cards --- */
.fks-category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.fks-category-card {
position: relative;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 1/1;
display: block;
text-decoration: none;
background: #2a2a2a;
transition: box-shadow 400ms ease, transform 400ms ease;
}
.fks-category-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
display: block;
}
.fks-category-card:hover img {
transform: scale(1.05);
}
.fks-category-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
transform: translateY(-4px);
}
.fks-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 56px 24px 24px;
background: linear-gradient(to top, rgba(0,0,0,0.95) 65%, transparent 85%);
pointer-events: none;
z-index: 2;
}
.fks-card-title {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 22px;
color: #fff;
margin: 0 0 2px;
line-height: 1.2;
}
.fks-card-desc {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
color: rgba(255,255,255,0.8);
margin: 0;
line-height: 1.5;
}
.fks-cat-heading {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 36px;
color: #fff;
text-align: center;
margin: 0 0 40px;
line-height: 1.2;
}
@media (min-width: 768px) and (max-width: 980px) {
.fks-category-grid {
grid-template-columns: repeat(2, 1fr);
}
.fks-cat-heading { font-size: 28px; margin-bottom: 32px; }
}
@media (max-width: 767px) {
.fks-category-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.fks-category-card { aspect-ratio: 1/1; }
.fks-card-title { font-size: 20px; }
.fks-cat-heading { font-size: 24px; margin-bottom: 24px; }
}
/* --- Phase 4: Featured Products --- */
.fks-product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 1200px;
margin: 0 auto;
}
.fks-product-card {
background: #1a1a1a;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
display: block;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.fks-product-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}
.fks-product-card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: contain;
background: #fff;
padding: 16px;
box-sizing: border-box;
display: block;
}
.fks-product-info {
padding: 14px 24px 16px;
}
.fks-product-name {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 20px;
color: #fff;
margin: 0;
line-height: 1.3;
}
.fks-product-price {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 18px;
color: rgba(255,255,255,0.9);
margin: 0;
}
.fks-cta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 1200px;
margin: 44px auto 0;
}
.fks-cta-card {
position: relative;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 3/2;
display: block;
text-decoration: none;
background: #2a2a2a;
transition: box-shadow 400ms ease, transform 400ms ease;
}
.fks-cta-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
display: block;
}
.fks-cta-card:hover img {
transform: scale(1.05);
}
.fks-cta-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
transform: translateY(-4px);
}
.fks-cta-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
padding: 0 32px 28px;
background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent 55%);
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
}
.fks-cta-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 26px;
color: #fff;
margin: 0;
line-height: 1.2;
}
.fks-cta-desc {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
color: rgba(255,255,255,0.8);
margin: 0;
}
@media (max-width: 767px) {
.fks-product-grid {
grid-template-columns: 1fr;
gap: 16px;
max-width: 400px;
margin: 0 auto;
}
.fks-product-card img {
padding: 12px;
}
.fks-product-name {
font-size: 17px;
}
.fks-product-price {
font-size: 16px;
}
.fks-product-info {
padding: 16px 16px 16px;
}
.fks-cta-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.fks-cta-card {
aspect-ratio: 16/9;
}
.fks-cta-title {
font-size: 22px;
}
}
/* --- Fitting Knowledge Blog Grid --- */
/* Grid wrapper: 3 equal columns, equal-height cards */
.fks-blog-grid .et_pb_blog_grid_wrapper {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
padding: 0 !important;
margin: 0 !important;
}
/* Kill Divi's default column wrapper sizing */
.fks-blog-grid .et_pb_blog_grid_wrapper .column {
display: contents !important;
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Card base */
.fks-blog-grid .et_pb_post {
display: flex !important;
flex-direction: column !important;
background-color: #FFFFFF !important;
background-image: linear-gradient(#ED7524, #ED7524) !important;
background-size: 0% 4px !important;
background-repeat: no-repeat !important;
background-position: bottom left !important;
border-radius: 12px !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
overflow: hidden !important;
transition: background-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
height: 100% !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Card hover: orange bar sweeps left to right + glow */
.fks-blog-grid .et_pb_post:hover {
background-size: 100% 4px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(237, 117, 36, 0.3) !important;
}
/* Image container: fixed aspect ratio */
.fks-blog-grid .et_pb_post .et_pb_image_container {
position: relative !important;
width: 100% !important;
aspect-ratio: 16 / 10 !important;
overflow: hidden !important;
border-radius: 12px 12px 0 0 !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* Image: fill container, crop to fit */
.fks-blog-grid .et_pb_post .et_pb_image_container img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
/* Text area padding */
.fks-blog-grid .et_pb_post h2.entry-title,
.fks-blog-grid .et_pb_post .post-meta,
.fks-blog-grid .et_pb_post .post-content {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Entry title */
.fks-blog-grid .et_pb_post h2.entry-title {
font-family: "Open Sans", sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #1a1a1a !important;
margin: 0 !important;
padding-top: 20px !important;
padding-bottom: 0 !important;
}
.fks-blog-grid .et_pb_post h2.entry-title a {
color: #1a1a1a !important;
text-decoration: none !important;
transition: color 0.25s ease !important;
}
.fks-blog-grid .et_pb_post h2.entry-title a:hover {
color: #ED7524 !important;
}
/* Post meta: uppercase orange label */
.fks-blog-grid .et_pb_post .post-meta {
font-family: "Open Sans", sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #ED7524 !important;
margin: 8px 0 0 0 !important;
padding-bottom: 0 !important;
}
.fks-blog-grid .et_pb_post .post-meta a {
color: #ED7524 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.fks-blog-grid .et_pb_post .post-meta a:hover {
color: #c45e16 !important;
}
/* Separator between date and category */
.fks-blog-grid .et_pb_post .post-meta .published {
color: #999 !important;
font-weight: 400 !important;
}
/* Post content: grows to fill remaining card height */
.fks-blog-grid .et_pb_post .post-content {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
margin: 0 !important;
padding-top: 12px !important;
padding-bottom: 20px !important;
}
/* Excerpt text */
.fks-blog-grid .et_pb_post .post-content .post-content-inner,
.fks-blog-grid .et_pb_post .post-content .post-content-inner p {
font-family: "Open Sans", sans-serif !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: #666 !important;
margin: 0 0 16px 0 !important;
}
/* Read more link: pushed to bottom of card */
.fks-blog-grid .et_pb_post .post-content a.more-link {
font-family: "Open Sans", sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #ED7524 !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
margin-top: auto !important;
display: inline-block !important;
transition: color 0.2s ease !important;
}
.fks-blog-grid .et_pb_post .post-content a.more-link:hover {
color: #c45e16 !important;
}
/* --- Scroll Reveal Animation --- */
/* Initial hidden state */
.fks-blog-grid .et_pb_post {
opacity: 0;
transform: translateY(24px);
}
/* Visible state triggered by IntersectionObserver adding .fks-blog-visible */
.fks-blog-grid.fks-blog-visible .et_pb_post {
opacity: 1 !important;
transform: translateY(0) !important;
transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* Staggered delays per column */
.fks-blog-grid.fks-blog-visible .column:nth-child(1) .et_pb_post {
transition-delay: 0s !important;
}
.fks-blog-grid.fks-blog-visible .column:nth-child(2) .et_pb_post {
transition-delay: 0.12s !important;
}
.fks-blog-grid.fks-blog-visible .column:nth-child(3) .et_pb_post {
transition-delay: 0.24s !important;
}
/* Make entire card clickable via JS */
.fks-blog-grid .et_pb_post {
cursor: pointer !important;
}
/* --- View All Articles Button --- */
.fks-blog-viewall {
font-family: "Open Sans", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: none !important;
color: #FFFFFF !important;
background: #ED7524 !important;
border: 0 !important;
border-radius: 4px !important;
padding: 16px 48px !important;
min-height: 54px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 250ms ease !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.fks-blog-viewall:hover {
background: #ED7524 !important;
color: #FFFFFF !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(237,117,36,0.4) !important;
}
/* --- Divi Override Cleanup --- */
/* Remove Divi's default bottom border on posts */
.fks-blog-grid .et_pb_post {
border-bottom: none !important;
}
/* Remove Divi's default pagination spacing if present */
.fks-blog-grid .et_pb_blog_grid_wrapper + .pagination {
margin-top: 32px !important;
}
/* Ensure no float-based layout remnants */
.fks-blog-grid .et_pb_blog_grid_wrapper:after {
display: none !important;
}
/* --- Responsive: Tablet (2 columns) --- */
@media (max-width: 980px) {
.fks-blog-grid .et_pb_blog_grid_wrapper {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
.fks-blog-grid .et_pb_post h2.entry-title {
font-size: 16px !important;
}
}
/* --- Responsive: Phone (single column) --- */
@media (max-width: 767px) {
.fks-blog-grid .et_pb_blog_grid_wrapper {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.et_pb_blog_grid .fks-blog-grid .et_pb_blog_grid_wrapper .column .et_pb_post,
.fks-blog-grid .et_pb_post,
.fks-blog-grid article.et_pb_post {
margin-bottom: 32px !important;
padding-bottom: 0 !important;
}
.fks-blog-grid .et_pb_blog_grid_wrapper .column:last-child .et_pb_post,
.fks-blog-grid article.et_pb_post:last-of-type {
margin-bottom: 0 !important;
}
.fks-blog-grid .et_pb_post h2.entry-title {
font-size: 17px !important;
padding-top: 16px !important;
}
.fks-blog-grid .et_pb_post h2.entry-title,
.fks-blog-grid .et_pb_post .post-meta,
.fks-blog-grid .et_pb_post .post-content {
padding-left: 20px !important;
padding-right: 20px !important;
}
.fks-blog-grid .et_pb_post .post-content {
padding-bottom: 16px !important;
}
/* No stagger on mobile - all appear together */
.fks-blog-grid.fks-blog-visible .column:nth-child(n) .et_pb_post {
transition-delay: 0s !important;
}
}
/* --- Newsletter Subscribe Form --- */
.fks-newsletter-form {
max-width: 520px;
margin: 0 auto;
}
.fks-newsletter-row {
display: flex;
gap: 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.fks-newsletter-input {
flex: 1;
font-family: "Open Sans", sans-serif;
font-size: 16px;
padding: 16px 20px 16px 20px !important;
border: none;
outline: none;
background: #FFFFFF;
color: #1a1a1a;
min-height: 54px;
box-sizing: border-box;
}
.fks-newsletter-input::placeholder {
color: #999;
}
.fks-newsletter-btn {
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
color: #FFFFFF;
background: #ED7524;
border: none;
padding: 16px 36px;
cursor: pointer;
transition: all 250ms ease;
white-space: nowrap;
min-height: 54px;
box-sizing: border-box;
}
.fks-newsletter-btn:hover {
background: #ED7524;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(237, 117, 36, 0.4);
}
@media (max-width: 767px) {
.fks-newsletter-row {
flex-direction: column;
border-radius: 4px;
}
.fks-newsletter-input {
border-radius: 4px 4px 0 0;
}
.fks-newsletter-btn {
border-radius: 0 0 4px 4px;
width: 100%;
}
.fks-newsletter-row {
gap: 12px;
}
.fks-newsletter-input {
border-radius: 4px !important;
}
.fks-newsletter-btn {
border-radius: 4px !important;
}
}
/* --- Mobile Trust Bar + Reviews Fixes (phone only) --- */
@media (max-width: 767px) {
/* Each stat: flex column, centered, stars reordered */
.fks-stat {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.fks-stat-value {
order: 1 !important;
justify-content: center !important;
}
.fks-stars-below {
position: relative !important;
top: auto !important;
order: 2 !important;
margin: 0 !important;
padding: 0 !important;
justify-content: center !important;
}
.fks-stat-label {
order: 3 !important;
margin-top: 0px !important;
text-align: center !important;
width: 100% !important;
/* Offset letter-spacing visual shift */
padding-left: 2.5px !important;
}
/* Dots: more space from cards, section symmetry */
.cr-reviews-slider .slick-dots {
bottom: auto !important;
position: relative !important;
margin-top: 20px !important;
}
.cr-reviews-slider {
padding-bottom: 0px !important;
}
/* Hide arrows on mobile - dots are enough */
.cr-reviews-slider .slick-prev,
.cr-reviews-slider .slick-next {
display: none !important;
}
}
/* --- Mobile Spacing Fixes (phone only) --- */
@media (max-width: 767px) {
/* Category cards: more gap between stacked cards */
.fks-category-grid {
gap: 24px !important;
}
/* Featured product cards: more gap */
.fks-product-grid {
gap: 24px !important;
}
/* CTA cards (For Cyclists / For Fitters): more gap */
.fks-cta-grid {
gap: 24px !important;
}
/* Blog cards: more gap between stacked posts */
.fks-blog-grid .et_pb_blog_grid_wrapper {
gap: 32px !important;
}
/* View All Articles button: balanced spacing */
.fks-blog-viewall {
display: block !important;
text-align: center !important;
margin: 0 auto !important;
}
/* About section: space between button and image */
.fks-about-image {
margin-top: 32px !important;
}
}
/* --- Orange Accent Additions --- */
/* Category card hover: orange bottom underline */
.fks-category-card {
transition: box-shadow 400ms ease, transform 400ms ease, border 400ms ease !important;
border-bottom: 3px solid transparent;
}
.fks-category-card:hover {
border-bottom-color: #ED7524 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(237,117,36,0.25) !important;
}
/* Product card hover: orange bottom underline */
.fks-product-card {
border-bottom: 3px solid transparent !important;
transition: transform 300ms ease, box-shadow 300ms ease, border 300ms ease !important;
}
.fks-product-card:hover {
border-bottom-color: #ED7524 !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.2), 0 4px 12px rgba(237,117,36,0.2) !important;
}
/* Product price in orange */
.fks-product-price {
color: #ED7524 !important;
}
/* CTA card hover: orange bottom underline (matches product cards) */
.fks-cta-card {
border-bottom: 3px solid transparent !important;
transition: box-shadow 400ms ease, transform 400ms ease, border 300ms ease !important;
}
.fks-cta-card:hover {
border-bottom-color: #ED7524 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(237,117,36,0.2) !important;
}
/* H2 keyword animated underline */
.fks-highlight {
display: inline;
background-image: linear-gradient(#ED7524, #ED7524);
background-size: 0% 3px;
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 4px;
transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fks-highlight.fks-underlined {
background-size: 100% 3px;
}
/* About section image orange accent */
.fks-about-image img {
border-right: 3px solid #ED7524 !important;
}
/* --- Trust Bar Stars Hover Animation --- */
.fks-star path {
fill: #ED7524;
}
.fks-star {
transform-origin: center;
overflow: visible;
}
.fks-star.fks-star-animating {
animation: fks-star-pop 1s ease both;
}
.fks-star.fks-star-animating path {
animation: fks-star-color 1s ease both;
}
@keyframes fks-star-pop {
0% { transform: scale(1); }
30% { transform: scale(1.5); }
55% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes fks-star-color {
0% { fill: #ED7524; }
30% { fill: #FFFFFF; }
55% { fill: #FFFFFF; }
100% { fill: #ED7524; }
}
document.addEventListener('DOMContentLoaded', function() {
/* --- Hero Crossfade --- */
/* --- Trust Bar Count-Up --- */
var trustBar = document.querySelector('.fks-trust-bar');
if (!trustBar) return;
var counters = trustBar.querySelectorAll('.fks-count');
var animated = false;
function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
function animateCounters() {
if (animated) return;
animated = true;
trustBar.classList.add('fks-animated');
counters.forEach(function(counter) {
var target = parseFloat(counter.dataset.target);
var decimals = parseInt(counter.dataset.decimals) || 0;
var suffix = counter.dataset.suffix || '';
var duration = 2400;
var start = performance.now();
function update(now) {
var elapsed = now - start;
var progress = Math.min(elapsed / duration, 1);
var current = easeOutCubic(progress) * target;
if (decimals > 0) {
counter.textContent = current.toFixed(decimals) + suffix;
} else {
counter.textContent = Math.floor(current).toLocaleString() + suffix;
}
if (progress < 1) requestAnimationFrame(update); } requestAnimationFrame(update); }); } var io = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { animateCounters(); io.disconnect(); } }); }, { threshold: 0.3 }); io.observe(trustBar); /* --- Featured Products Loader (WC Store API) --- */ var grid = document.getElementById('fks-featured-grid'); if (grid) { fetch('/wp-json/wc/store/v1/products?featured=true&per_page=4&orderby=menu_order&order=asc') .then(function(r) { return r.json(); }) .then(function(products) { var html = ''; products.forEach(function(p) { var img = (p.images && p.images[0]) ? p.images[0].src : ''; var alt = (p.images && p.images[0]) ? (p.images[0].alt || p.name) : p.name; var price = p.prices ? (parseInt(p.prices.price) / 100) : 0; var fmtPrice = price.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 }); html += '
'
+ '
'
+ ''
+ '
' + p.name + '
'
+ '
' + fmtPrice + '
'
+ '
';
});
grid.innerHTML = html;
});
}
/* --- Star Hover Animation (JS-driven for Divi compatibility) --- */
var stars = trustBar.querySelectorAll('.fks-star');
trustBar.addEventListener('mouseenter', function() {
stars.forEach(function(star, i) {
star.classList.remove('fks-star-animating');
void star.offsetWidth;
setTimeout(function() {
star.classList.add('fks-star-animating');
}, i * 150);
});
});
trustBar.addEventListener('mouseleave', function() {
stars.forEach(function(star) {
star.classList.remove('fks-star-animating');
});
});
});