diff --git a/index.html b/index.html index 534b656..af733d8 100644 --- a/index.html +++ b/index.html @@ -15,49 +15,10 @@ + + @@ -1476,9 +1570,7 @@
- -
-
+
@@ -1566,13 +1658,7 @@
-
-
-
-
+ style="position: absolute; inset: 0; background: url('images/painting-masterpiece.png') center/cover no-repeat; animation: heroSlideLoop 18s infinite; opacity: 1;">
+ + @@ -1692,26 +1802,27 @@
-
-
- Mike Scollo - Founder & Operations Director - +
+
+ CEO & Founder
-
-

- Mike Scollo

-

Founder & Operations - Director

+
+

+ J & H Founder

+

+ CEO & Founder

+ +
+ + + +
@@ -1779,102 +1890,152 @@ .srv-card { position: relative; - border-radius: 20px; + border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, 0.03); - /* Glass base */ - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); - transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none !important; - display: block; - cursor: pointer; + display: flex; + flex-direction: column; + height: 100%; + cursor: default; border: 1px solid rgba(255, 255, 255, 0.1); } .srv-card:hover { - transform: translateY(-12px) scale(1.02); - background: rgba(255, 255, 255, 0.08); - box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(109, 22, 223, 0.3); - border-color: rgba(109, 22, 223, 0.4); + transform: translateY(-12px); + background: rgba(255, 255, 255, 0.06); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(109, 22, 223, 0.2); + border-color: rgba(109, 22, 223, 0.3); } - .srv-label { - background: rgba(255, 255, 255, 0.05); - /* Match glass theme */ - text-align: center; - padding: 20px 15px; + .srv-card-img-wrap { position: relative; - border-top: 1px solid rgba(255, 255, 255, 0.05); - } - - .srv-label h5 { - color: white; - /* Contrast for dark bg */ - font-weight: 700; - font-size: 1.1rem; - margin: 0 0 6px; + overflow: hidden; + height: 200px; } .srv-card-img { width: 100%; - height: 230px; + height: 100%; object-fit: cover; - display: block; transition: transform 0.6s ease; } .srv-card:hover .srv-card-img { - transform: scale(1.08); + transform: scale(1.1); } - .srv-icon-box { - position: absolute; - bottom: 85px; - left: 50%; - transform: translateX(-50%); - width: 62px; - height: 62px; - border-radius: 14px; + .srv-content { + padding: 30px; + flex-grow: 1; display: flex; - align-items: center; - justify-content: center; - font-size: 1.4rem; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease, box-shadow 0.3s ease; - z-index: 5; + flex-direction: column; } - .srv-card:hover .srv-icon-box { - transform: translateX(-50%) translateY(-5px) scale(1.1); - box-shadow: 0 15px 40px rgba(109, 22, 223, 0.4); + .srv-content h5 { + color: white; + font-weight: 800; + font-size: 1.35rem; + margin-bottom: 12px; } - .srv-label span { - font-size: 0.78rem; - font-weight: 600; - letter-spacing: 1px; + .srv-benefit { + color: #0dbbc9; + font-size: 0.9rem; + font-weight: 700; text-transform: uppercase; - opacity: 0.7; + letter-spacing: 1px; + margin-bottom: 15px; + display: block; } - .srv-card-img-wrap { - position: relative; - overflow: hidden; + .srv-text { + color: rgba(255, 255, 255, 0.7); + font-size: 0.95rem; + line-height: 1.6; + margin-bottom: 20px; } - .srv-card-img-wrap::after { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(to bottom, transparent 30%, rgba(109, 22, 223, 0.6) 100%); - opacity: 0; - transition: opacity 0.4s ease; + .srv-list { + list-style: none; + padding: 0; + margin: 0 0 25px 0; } - .srv-card:hover .srv-card-img-wrap::after { - opacity: 1; + .srv-list li { + color: rgba(255, 255, 255, 0.8); + font-size: 0.9rem; + margin-bottom: 8px; + display: flex; + align-items: center; + } + + .srv-list li i { + color: #6d16df; + margin-right: 10px; + font-size: 1rem; + } + + .srv-cta-group { + margin-top: auto; + display: flex; + gap: 12px; + } + + .btn-srv-primary { + background: linear-gradient(135deg, #6d16df, #0dbbc9); + color: white !important; + padding: 10px 20px; + border-radius: 50px; + font-weight: 700; + font-size: 0.85rem; + text-decoration: none; + transition: all 0.3s ease; + text-align: center; + flex-grow: 1; + } + + .btn-srv-primary:hover { + box-shadow: 0 5px 15px rgba(109, 22, 223, 0.4); + transform: translateY(-2px); + } + + .btn-srv-secondary { + border: 1px solid rgba(255, 255, 255, 0.2); + color: white !important; + padding: 10px 20px; + border-radius: 50px; + font-weight: 600; + font-size: 0.85rem; + text-decoration: none; + transition: all 0.3s ease; + text-align: center; + } + + .btn-srv-secondary:hover { + background: rgba(255, 255, 255, 0.1); + } + + .srv-icon-badge { + position: absolute; + top: 20px; + right: 20px; + width: 45px; + height: 45px; + background: rgba(10, 0, 16, 0.6); + backdrop-filter: blur(10px); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 1.2rem; + z-index: 5; + border: 1px solid rgba(255, 255, 255, 0.1); } @@ -1901,138 +2062,211 @@
- +
- + - +
- +
- + - +
@@ -2044,178 +2278,134 @@ -
- - - - -
- - - - -
-

┬®´©Å 2026 J & H Painting FL. All Rights + +

+

┬® 2026 J & H Painting FL. All Rights Reserved.

-
- + + + + + + + +
@@ -3373,24 +3626,7 @@ document.addEventListener('DOMContentLoaded', function () { setTimeout(hideLoader, 2200); }); setTimeout(hideLoader, 3000); - // CUSTOM CURSOR - const cursorDot = document.getElementById('cursorDot'); - const cursorRing = document.getElementById('cursorRing'); - let mouseX = 0, mouseY = 0, ringX = 0, ringY = 0; - document.addEventListener('mousemove', function (e) { - mouseX = e.clientX; mouseY = e.clientY; - cursorDot.style.transform = `translate(${mouseX - 4}px, ${mouseY - 4}px)`; - }); - function animateRing() { - ringX += (mouseX - ringX) * 0.12; ringY += (mouseY - ringY) * 0.12; - cursorRing.style.transform = `translate(${ringX - 18}px, ${ringY - 18}px)`; - requestAnimationFrame(animateRing); - } - animateRing(); - document.querySelectorAll('a, button, .logo-item, .service-row, .gallery-img-wrap').forEach(el => { - el.addEventListener('mouseenter', () => cursorRing.classList.add('hover')); - el.addEventListener('mouseleave', () => cursorRing.classList.remove('hover')); - }); + // SCROLL PROGRESS window.addEventListener('scroll', function () { @@ -3513,15 +3749,7 @@ }, { threshold: 0.5 }); document.querySelectorAll('.star-rating').forEach(function (el) { starObserver.observe(el); }); - // CAROUSEL - document.addEventListener('DOMContentLoaded', function () { - var galleryCarousel = document.getElementById('clientCarousel'); - if (galleryCarousel) { - var galleryInstance = bootstrap.Carousel.getInstance(galleryCarousel); - if (galleryInstance) galleryInstance.dispose(); - new bootstrap.Carousel(galleryCarousel, { interval: 3000, ride: 'carousel', pause: false, wrap: true }); - } - }); + // CAROUSEL REMOVED FOR VERTICAL SLIDER // GALLERY MODAL ÔÇö populate images dynamically (function () {