/* Main Timeline Wrapper */
.services-timeline-wrapper {
max-width: 400px;
margin: 0;
padding: 1rem 0;
font-family: ‘Arial’, sans-serif;
background: transparent;
}
/* Timeline Container */
.timeline-container {
position: relative;
padding: 0 2rem;
}
/* Timeline Line */
.timeline-container::before {
content: ”;
position: absolute;
left: 37px;
top: 0;
bottom: 0;
width: 4px;
background: #B4A6A2;
opacity: 0.6;
}
/* Timeline Items */
.timeline-item {
position: relative;
margin-bottom: 2rem;
padding-left: 3rem;
cursor: pointer;
transition: all 0.2s ease;
}
.timeline-item:last-child {
margin-bottom: 0;
}
/* Timeline Markers */
.timeline-marker {
position: absolute;
left: -0.5rem;
top: 1px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Timeline Dot */
.timeline-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: #B4A6A2;
transition: all 0.3s ease;
opacity: 1;
z-index: 1;
}
/* Active State */
.timeline-item.active .timeline-dot {
background: #f5a524;
width: 20px;
height: 20px;
opacity: 1;
box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
}
.timeline-item.active .service-title {
color: #f5a524;
font-weight: 700;
}
/* Timeline Content */
.timeline-content {
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
/* Service Titles */
.service-title {
margin: 0;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.5px;
color: #fffdfc;
text-transform: uppercase;
transition: color 0.3s ease;
line-height: 1.2;
}
/* Hover Effects */
.timeline-item:hover .timeline-dot {
background: #f5a524;
opacity: 1;
}
.timeline-item:hover .service-title {
color: #f5a524;
}
.timeline-item.active:hover .timeline-dot {
background: #f5a524;
}
.timeline-item.active:hover .service-title {
color: #f5a524;
}
/* =====================================================
ROOFING SUB MENU
===================================================== */
.roofing-submenu {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 10px;
padding-left: 0;
}
/* Show submenu on Roofing hover */
.roofing-item:hover .roofing-submenu {
display: flex;
}
/* Submenu Links */
.roofing-submenu a {
display: block;
color: #fffdfc;
font-size: 1rem;
font-family: ‘Montserrat’, sans-serif;
font-weight: 400;
letter-spacing: 0.3px;
line-height: 1.3;
text-decoration: none;
text-transform: none;
transition: color 0.3s ease;
}
/* Submenu Hover */
.roofing-submenu a:hover {
color: #f5a524;
}
/* =====================================================
RESPONSIVE DESIGN
===================================================== */
@media (max-width: 768px) {
.services-timeline-wrapper {
max-width: 100%;
padding: 1rem 0;
margin: 0 1rem;
}
.timeline-container {
padding: 0 1rem;
}
.timeline-container::before {
left: 25px;
width: 2px;
}
.timeline-marker {
left: 0.5rem;
}
.timeline-item {
margin-bottom: 2rem;
padding-left: 2.3rem;
}
.service-title {
font-size: 0.9rem;
letter-spacing: 0.2px;
}
.roofing-submenu a {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.services-timeline-wrapper {
padding: 0.8rem 0;
}
.timeline-container::before {
left: 23px;
}
.timeline-marker {
left: 0.3rem;
}
.timeline-item {
margin-bottom: 1.3rem;
}
.service-title {
font-size: 0.85rem;
}
.timeline-dot {
width: 18px;
height: 18px;
}
.timeline-item.active .timeline-dot {
width: 18px;
height: 18px;
}
.roofing-submenu {
gap: 6px;
margin-top: 8px;
}
.roofing-submenu a {
font-size: 0.90rem;
}
}
document.addEventListener(‘DOMContentLoaded’, function() {
console.log(‘Services Timeline initialized’);
console.log(‘Current URL:’, window.location.href);
console.log(‘Current pathname:’, window.location.pathname);
/* =====================================================
ACTIVE SERVICE DETECTION
===================================================== */
function detectActiveService() {
const currentPath =
window.location.pathname;
const currentUrl =
window.location.href;
console.log(
‘Detecting active service for:’,
currentPath
);
/* Clear all active states */
document
.querySelectorAll(‘.timeline-item’)
.forEach(function(item) {
item.classList.remove(‘active’);
});
let activeFound = false;
/* Check all timeline items */
document
.querySelectorAll(‘.timeline-item’)
.forEach(function(item) {
const serviceSlug =
item.getAttribute(‘data-service’);
const servicePage =
item.getAttribute(‘data-page’);
console.log(
‘Checking service:’,
serviceSlug
);
/*
* Method 1:
* Exact path match
*/
if (
servicePage &&
currentPath === servicePage
) {
console.log(
‘Exact path match:’,
serviceSlug
);
item.classList.add(‘active’);
activeFound = true;
return;
}
/*
* Method 2:
* Path contains service slug
*/
if (
currentPath.includes(
‘/’ + serviceSlug
)
) {
console.log(
‘Path contains slug:’,
serviceSlug
);
item.classList.add(‘active’);
activeFound = true;
return;
}
/*
* Method 3:
* URL contains service slug
*/
if (
currentUrl.includes(serviceSlug)
) {
console.log(
‘URL contains slug:’,
serviceSlug
);
item.classList.add(‘active’);
activeFound = true;
return;
}
/*
* Method 4:
* WordPress service URL
*/
if (
currentPath.includes(‘/service/’) &&
currentPath.includes(serviceSlug)
) {
console.log(
‘WordPress service match:’,
serviceSlug
);
item.classList.add(‘active’);
activeFound = true;
return;
}
/*
* Method 5:
* Query parameter
*/
const urlParams =
new URLSearchParams(
window.location.search
);
if (
urlParams.get(‘service’) ===
serviceSlug
) {
console.log(
‘Query parameter match:’,
serviceSlug
);
item.classList.add(‘active’);
activeFound = true;
return;
}
});
/*
* No active service
*/
if (!activeFound) {
console.log(
‘No active service detected’
);
}
/*
* Final active status
*/
const activeItems =
document.querySelectorAll(
‘.timeline-item.active’
);
console.log(
‘Active items:’,
activeItems.length
);
activeItems.forEach(function(item) {
console.log(
‘Active service:’,
item.getAttribute(
‘data-service’
)
);
});
}
/* =====================================================
INITIAL DETECTION
===================================================== */
detectActiveService();
/* =====================================================
URL CHANGE DETECTION
===================================================== */
window.addEventListener(
‘popstate’,
detectActiveService
);
window.addEventListener(
‘hashchange’,
detectActiveService
);
/* =====================================================
WORDPRESS / JQUERY
===================================================== */
if (
typeof jQuery !== ‘undefined’
) {
jQuery(document).on(
‘ready’,
function() {
detectActiveService();
}
);
}
/* =====================================================
GLOBAL SERVICES TIMELINE
===================================================== */
window.ServicesTimeline = {
detectActive: detectActiveService,
setActive: function(serviceSlug) {
console.log(
‘Manually setting active:’,
serviceSlug
);
document
.querySelectorAll(‘.timeline-item’)
.forEach(function(item) {
item.classList.remove(
‘active’
);
if (
item.getAttribute(
‘data-service’
) === serviceSlug
) {
item.classList.add(
‘active’
);
}
});
}
};
/* =====================================================
DEBUG INFO
===================================================== */
setTimeout(function() {
console.log(
‘=== SERVICES TIMELINE DEBUG INFO ===’
);
console.log(
‘Current URL:’,
window.location.href
);
console.log(
‘Current pathname:’,
window.location.pathname
);
console.log(
‘Available services:’
);
document
.querySelectorAll(‘.timeline-item’)
.forEach(function(item) {
const service =
item.getAttribute(
‘data-service’
);
const page =
item.getAttribute(
‘data-page’
);
const isActive =
item.classList.contains(
‘active’
);
console.log(
‘- ‘ +
service +
‘: ‘ +
page +
(
isActive
? ‘ (ACTIVE)’
: ”
)
);
});
}, 500);
});
/* =====================================================
WORDPRESS INTEGRATION
===================================================== */
function initServicesTimelineForWordPress() {
if (
window.ServicesTimeline
) {
console.log(
‘Re-initializing Services Timeline’
);
window.ServicesTimeline.detectActive();
}
}
if (
typeof wp !== ‘undefined’
) {
document.addEventListener(
‘DOMContentLoaded’,
function() {
setTimeout(
initServicesTimelineForWordPress,
1000
);
}
);
}
ROOFING
PAINTING
SIDING
FLOORING
GUTTERS
DECKS & PORCHES
PATIOS
FENCING
KITCHENS
BATHROOMS
MASONRY
PRESSURE WASHING
DESIGN SERVICES
ALL SERVICES
Comprehensive Home Improvement Services by Bison Works
Your vision for a perfect home is our blueprint. Whether you’re dreaming of hosting dinners in a beautiful kitchen, unwinding in a serene new bathroom, or creating family memories in a finished basement, our team is here to make it happen. We extend your living space into the outdoors with custom decks and patios and add functionality with expertly built garages, sheds, and home additions. With a commitment to quality masonry and meticulous craftsmanship, we build lasting value and turn your house into the home you’ve always wanted.
Comprehensive Roofing Services for Lasting Home Protection
Refresh your space with professional painting done right. Crisp lines, smooth finishes, and long-lasting color that upgrades your home inside and out.
