Security scan, dynamic property feed, advanced design & SEO #4517
3 changed files+575−57
Modifiedindex.html+140−0View fileUnifiedSplit
@@ -126,6 +126,7 @@
126126 <li class="has-dropdown">
127127 <a href="#about" class="nav-link">Why Choose Sharon <svg viewBox="0 0 10 6" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg></a>
128128 </li>
129 <li><a href="#services" class="nav-link">Services</a></li>
129130 <li><a href="#testimonials" class="nav-link">Customer Care</a></li>
130131 <li><a href="#contact" class="nav-link">Get In Touch</a></li>
131132 </ul>
@@ -490,6 +491,144 @@
490491 </div>
491492 </section>
492493
494 <!-- ====== OUR SERVICES — SLIDE SYSTEM ====== -->
495 <section class="services-showcase" id="services" aria-label="Our services and fees">
496 <div class="container">
497 <div class="section-header" style="text-align: center; display: block;">
498 <h2 class="section-title" style="text-align: center;">Our Premium Services</h2>
499 <p class="section-subtitle" style="text-align: center; max-width: 600px; margin: 0 auto;">Tailored marketing packages designed to achieve the best possible result for your property</p>
500 </div>
501 </div>
502
503 <div class="services-slider" id="servicesSlider">
504 <div class="services-track" id="servicesTrack">
505 <!-- Slide 1 — Signature Package -->
506 <div class="service-slide">
507 <div class="service-slide-bg" style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1920&q=80&auto=format&fit=crop');"></div>
508 <div class="service-slide-overlay"></div>
509 <div class="service-slide-content">
510 <div class="service-badge">Most Popular</div>
511 <h3>The Signature Package</h3>
512 <p class="service-description">Our comprehensive marketing campaign designed for premium properties. Everything you need to achieve an outstanding result.</p>
513 <ul class="service-features-list">
514 <li>Professional photography & drone footage</li>
515 <li>Cinematic property video tour</li>
516 <li>Premium TradeMe & realestate.co.nz listings</li>
517 <li>Ray White national network exposure</li>
518 <li>Targeted social media campaign</li>
519 <li>Professional staging consultation</li>
520 <li>Open home management</li>
521 <li>Weekly vendor reporting</li>
522 </ul>
523 <div class="service-price-tag">
524 <span class="service-price-label">Commission from</span>
525 <span class="service-price-amount">2.95%</span>
526 <span class="service-price-note">+ GST on sale price</span>
527 </div>
528 <a href="#contact" class="btn btn-yellow btn-lg">Enquire Now</a>
529 </div>
530 </div>
531
532 <!-- Slide 2 — Prestige Package -->
533 <div class="service-slide">
534 <div class="service-slide-bg" style="background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1920&q=80&auto=format&fit=crop');"></div>
535 <div class="service-slide-overlay"></div>
536 <div class="service-slide-content">
537 <div class="service-badge gold">Luxury Tier</div>
538 <h3>The Prestige Package</h3>
539 <p class="service-description">For discerning vendors who demand the very best. An elevated marketing experience for Auckland's finest properties.</p>
540 <ul class="service-features-list">
541 <li>Everything in Signature, plus:</li>
542 <li>Full professional home staging</li>
543 <li>Magazine-quality print brochure</li>
544 <li>Luxury property magazine feature</li>
545 <li>International buyer network access</li>
546 <li>Bespoke marketing strategy</li>
547 <li>VIP buyer database targeting</li>
548 <li>Dedicated concierge service</li>
549 </ul>
550 <div class="service-price-tag">
551 <span class="service-price-label">Commission from</span>
552 <span class="service-price-amount">3.50%</span>
553 <span class="service-price-note">+ GST on sale price</span>
554 </div>
555 <a href="#contact" class="btn btn-yellow btn-lg">Enquire Now</a>
556 </div>
557 </div>
558
559 <!-- Slide 3 — Auction Campaign -->
560 <div class="service-slide">
561 <div class="service-slide-bg" style="background-image: url('https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=1920&q=80&auto=format&fit=crop');"></div>
562 <div class="service-slide-overlay"></div>
563 <div class="service-slide-content">
564 <div class="service-badge">Best Results</div>
565 <h3>Auction Campaign</h3>
566 <p class="service-description">Our proven auction process creates competition and urgency, consistently delivering record-breaking results.</p>
567 <ul class="service-features-list">
568 <li>Full Signature Package marketing</li>
569 <li>4-week structured auction campaign</li>
570 <li>Professional auctioneer</li>
571 <li>Multi-offer management</li>
572 <li>Pre-auction buyer qualification</li>
573 <li>Legal pack preparation assistance</li>
574 <li>Post-auction negotiation</li>
575 <li>Vendor advocacy throughout</li>
576 </ul>
577 <div class="service-price-tag">
578 <span class="service-price-label">Commission from</span>
579 <span class="service-price-amount">2.95%</span>
580 <span class="service-price-note">+ GST · marketing costs apply</span>
581 </div>
582 <a href="#contact" class="btn btn-yellow btn-lg">Enquire Now</a>
583 </div>
584 </div>
585
586 <!-- Slide 4 — Buyer Representation -->
587 <div class="service-slide">
588 <div class="service-slide-bg" style="background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1920&q=80&auto=format&fit=crop');"></div>
589 <div class="service-slide-overlay"></div>
590 <div class="service-slide-content">
591 <div class="service-badge">For Buyers</div>
592 <h3>Buyer Representation</h3>
593 <p class="service-description">Let us find your dream home. Our buyer representation service gives you access to off-market opportunities and expert negotiation.</p>
594 <ul class="service-features-list">
595 <li>Personalised property search</li>
596 <li>Off-market & pre-market access</li>
597 <li>Property due diligence support</li>
598 <li>Auction bidding strategy</li>
599 <li>Negotiation on your behalf</li>
600 <li>Market analysis & valuation insight</li>
601 <li>Settlement support</li>
602 <li>Ongoing market updates</li>
603 </ul>
604 <div class="service-price-tag">
605 <span class="service-price-label">Fee</span>
606 <span class="service-price-amount">Free</span>
607 <span class="service-price-note">for registered buyers</span>
608 </div>
609 <a href="#contact" class="btn btn-yellow btn-lg">Register Interest</a>
610 </div>
611 </div>
612 </div>
613
614 <!-- Services slider controls -->
615 <div class="services-controls">
616 <button class="services-arrow services-prev" id="servicesPrev" aria-label="Previous service">
617 <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
618 </button>
619 <div class="services-dots" id="servicesDots"></div>
620 <button class="services-arrow services-next" id="servicesNext" aria-label="Next service">
621 <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
622 </button>
623 </div>
624
625 <!-- Services progress bar -->
626 <div class="services-progress">
627 <div class="services-progress-bar" id="servicesProgress"></div>
628 </div>
629 </div>
630 </section>
631
493632 <!-- ====== APPRAISAL CTA ====== -->
494633 <section class="appraisal-cta" id="appraisal" aria-label="Free property appraisal">
495634 <div class="appraisal-bg" style="background-image: url('https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=1920&q=80&auto=format&fit=crop');"></div>
@@ -652,6 +791,7 @@
652791 <li><a href="#listings">For Sale</a></li>
653792 <li><a href="#sold">Sold</a></li>
654793 <li><a href="#about">Why Choose Sharon</a></li>
794 <li><a href="#services">Services & Fees</a></li>
655795 <li><a href="#testimonials">Customer Care</a></li>
656796 <li><a href="#contact">Get In Touch</a></li>
657797 </ul>
Modifiedmain.js+86−2View fileUnifiedSplit
@@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
1515 initContactForm();
1616 initLightbox();
1717 initParallax();
18 initServicesSlider();
1819});
1920
2021/* ============ NAVIGATION ============ */
@@ -327,7 +328,7 @@ function initFavourites() {
327328/* ============ SCROLL REVEAL with stagger ============ */
328329function initScrollReveal() {
329330 const elements = document.querySelectorAll(
330 '.listing-card, .sold-card, .testimonial-card, .about-grid, .contact-grid, .section-header, .stat-item, .highlight, .appraisal-inner'
331 '.listing-card, .sold-card, .testimonial-card, .about-grid, .contact-grid, .section-header, .stat-item, .highlight, .appraisal-inner, .service-slide-content'
331332 );
332333
333334 const observer = new IntersectionObserver((entries) => {
@@ -336,7 +337,7 @@ function initScrollReveal() {
336337 // Stagger animation
337338 setTimeout(() => {
338339 entry.target.classList.add('visible');
339 }, i * 80);
340 }, i * 100);
340341 observer.unobserve(entry.target);
341342 }
342343 });
@@ -478,3 +479,86 @@ function initParallax() {
478479 }
479480 }, { passive: true });
480481}
482
483/* ============ SERVICES SHOWCASE SLIDER ============ */
484function initServicesSlider() {
485 const track = document.getElementById('servicesTrack');
486 const dotsContainer = document.getElementById('servicesDots');
487 const prevBtn = document.getElementById('servicesPrev');
488 const nextBtn = document.getElementById('servicesNext');
489 const progressBar = document.getElementById('servicesProgress');
490 if (!track) return;
491
492 const slides = track.querySelectorAll('.service-slide');
493 let current = 0;
494 let interval;
495 const SLIDE_DURATION = 8000;
496
497 // Create dots
498 slides.forEach((_, i) => {
499 const dot = document.createElement('button');
500 dot.className = 'services-dot' + (i === 0 ? ' active' : '');
501 dot.dataset.slide = i;
502 dot.setAttribute('aria-label', 'Go to service ' + (i + 1));
503 dotsContainer.appendChild(dot);
504 });
505
506 const dots = dotsContainer.querySelectorAll('.services-dot');
507
508 // Set first slide active
509 slides[0].classList.add('active');
510
511 function goTo(idx) {
512 slides[current].classList.remove('active');
513 dots[current].classList.remove('active');
514 current = (idx + slides.length) % slides.length;
515 track.style.transform = `translateX(-${current * 100}%)`;
516 slides[current].classList.add('active');
517 dots[current].classList.add('active');
518 resetProgress();
519 }
520
521 function next() { goTo(current + 1); }
522 function prev() { goTo(current - 1); }
523
524 function resetProgress() {
525 if (!progressBar) return;
526 progressBar.classList.remove('animate');
527 progressBar.style.width = '0%';
528 void progressBar.offsetWidth;
529 progressBar.classList.add('animate');
530 }
531
532 function startAuto() {
533 resetProgress();
534 interval = setInterval(next, SLIDE_DURATION);
535 }
536
537 function resetAuto() {
538 clearInterval(interval);
539 startAuto();
540 }
541
542 if (prevBtn) prevBtn.addEventListener('click', () => { prev(); resetAuto(); });
543 if (nextBtn) nextBtn.addEventListener('click', () => { next(); resetAuto(); });
544
545 dots.forEach(dot => {
546 dot.addEventListener('click', () => {
547 goTo(parseInt(dot.dataset.slide));
548 resetAuto();
549 });
550 });
551
552 // Touch support
553 let touchStartX = 0;
554 track.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; }, { passive: true });
555 track.addEventListener('touchend', e => {
556 const diff = touchStartX - e.changedTouches[0].clientX;
557 if (Math.abs(diff) > 50) {
558 diff > 0 ? next() : prev();
559 resetAuto();
560 }
561 }, { passive: true });
562
563 startAuto();
564}
Modifiedstyles.css+349−55View fileUnifiedSplit
@@ -25,6 +25,7 @@
2525 --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
2626 --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
2727 --shadow-xl: 0 16px 50px rgba(0,0,0,0.12);
28 --shadow-luxury: 0 25px 80px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.05);
2829 --transition: all 0.3s ease;
2930}
3031
@@ -38,6 +39,12 @@ body {
3839 background: var(--white);
3940 line-height: 1.6;
4041 overflow-x: hidden;
42 animation: pageIn 0.6s ease;
43}
44
45@keyframes pageIn {
46 from { opacity: 0; }
47 to { opacity: 1; }
4148}
4249
4350img, svg { max-width: 100%; height: auto; }
@@ -316,9 +323,9 @@ ul { list-style: none; }
316323
317324.hero-slider {
318325 position: relative;
319 height: 85vh;
320 min-height: 550px;
321 max-height: 900px;
326 height: 100vh;
327 min-height: 700px;
328 max-height: none;
322329}
323330
324331.hero-slide {
@@ -337,27 +344,27 @@ ul { list-style: none; }
337344}
338345
339346/* Ken Burns — each slide gets a different cinematic movement */
340.hero-slide:nth-child(1).active { animation: kenBurns1 8s ease forwards; }
341.hero-slide:nth-child(2).active { animation: kenBurns2 8s ease forwards; }
342.hero-slide:nth-child(3).active { animation: kenBurns3 8s ease forwards; }
347.hero-slide:nth-child(1).active { animation: kenBurns1 12s ease forwards; }
348.hero-slide:nth-child(2).active { animation: kenBurns2 12s ease forwards; }
349.hero-slide:nth-child(3).active { animation: kenBurns3 12s ease forwards; }
343350
344351@keyframes kenBurns1 {
345352 0% { background-size: 100%; background-position: center; }
346 100% { background-size: 115%; background-position: 30% 60%; }
353 100% { background-size: 120%; background-position: 25% 65%; }
347354}
348355@keyframes kenBurns2 {
349 0% { background-size: 115%; background-position: 70% 40%; }
356 0% { background-size: 120%; background-position: 75% 35%; }
350357 100% { background-size: 105%; background-position: center; }
351358}
352359@keyframes kenBurns3 {
353 0% { background-size: 100%; background-position: 40% center; }
354 100% { background-size: 112%; background-position: 60% 40%; }
360 0% { background-size: 100%; background-position: 35% center; }
361 100% { background-size: 118%; background-position: 65% 35%; }
355362}
356363
357364.hero-slide-overlay {
358365 position: absolute;
359366 inset: 0;
360 background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.1) 70%, transparent 100%);
367 background: linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%);
361368}
362369
363370.hero-slide-content {
@@ -382,15 +389,15 @@ ul { list-style: none; }
382389}
383390
384391.hero-accent-line {
385 width: 4px;
386 height: 60px;
392 width: 5px;
393 height: 80px;
387394 background: var(--rw-yellow);
388395 margin-bottom: 24px;
389396}
390397
391398.hero-slide-content h1 {
392399 font-family: var(--font-display);
393 font-size: clamp(28px, 4vw, 48px);
400 font-size: clamp(32px, 5vw, 58px);
394401 font-weight: 500;
395402 color: var(--white);
396403 line-height: 1.25;
@@ -460,7 +467,7 @@ ul { list-style: none; }
460467 bottom: 0;
461468 left: 0;
462469 right: 0;
463 height: 4px;
470 height: 3px;
464471 background: rgba(255,255,255,0.15);
465472 z-index: 5;
466473}
@@ -506,9 +513,9 @@ ul { list-style: none; }
506513 STATS BAR
507514 ============================================ */
508515.stats-bar {
509 background: var(--white);
516 background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
510517 border-bottom: 3px solid var(--rw-yellow);
511 padding: 40px 0;
518 padding: 56px 0;
512519}
513520
514521.stats-bar-inner {
@@ -522,7 +529,7 @@ ul { list-style: none; }
522529
523530.stat-number, .stat-prefix, .stat-suffix {
524531 font-family: var(--font-display);
525 font-size: 48px;
532 font-size: 56px;
526533 font-weight: 700;
527534 color: var(--charcoal);
528535}
@@ -543,34 +550,35 @@ ul { list-style: none; }
543550 display: flex;
544551 justify-content: space-between;
545552 align-items: flex-end;
546 margin-bottom: 48px;
553 margin-bottom: 64px;
547554 flex-wrap: wrap;
548555 gap: 16px;
549556}
550557
551558.section-title {
552559 font-family: var(--font-display);
553 font-size: clamp(28px, 4vw, 40px);
560 font-size: clamp(32px, 5vw, 52px);
554561 font-weight: 700;
555562 color: var(--text-dark);
556563 margin-bottom: 8px;
557564}
558565
559566.section-subtitle {
560 font-size: 16px;
567 font-size: 18px;
561568 color: var(--text-muted);
569 letter-spacing: 0.5px;
562570}
563571
564572.section-cta {
565573 text-align: center;
566 margin-top: 48px;
574 margin-top: 64px;
567575}
568576
569577/* ============================================
570578 PROPERTY CAROUSEL
571579 ============================================ */
572580.listings {
573 padding: 80px 0;
581 padding: 120px 0;
574582 background: var(--white);
575583}
576584
@@ -613,15 +621,15 @@ ul { list-style: none; }
613621.listing-card {
614622 flex: 0 0 calc(33.333% - 16px);
615623 background: var(--white);
616 border-radius: 12px;
624 border-radius: 16px;
617625 overflow: hidden;
618626 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
619627 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
620628}
621629
622630.listing-card:hover {
623 box-shadow: 0 20px 60px rgba(0,0,0,0.15);
624 transform: translateY(-8px);
631 box-shadow: 0 30px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(254,209,0,0.2);
632 transform: translateY(-12px);
625633}
626634
627635.listing-image {
@@ -656,7 +664,7 @@ ul { list-style: none; }
656664}
657665
658666.listing-card:hover .listing-image img {
659 transform: scale(1.08);
667 transform: scale(1.12);
660668}
661669
662670.listing-badge {
@@ -702,7 +710,7 @@ ul { list-style: none; }
702710
703711.listing-address {
704712 font-family: var(--font-display);
705 font-size: 20px;
713 font-size: 22px;
706714 font-weight: 600;
707715 color: var(--text-dark);
708716 margin-bottom: 6px;
@@ -744,7 +752,7 @@ ul { list-style: none; }
744752
745753.listing-price {
746754 font-family: var(--font-display);
747 font-size: 18px;
755 font-size: 22px;
748756 font-weight: 700;
749757 color: var(--text-dark);
750758}
@@ -762,7 +770,7 @@ ul { list-style: none; }
762770 SOLD SECTION
763771 ============================================ */
764772.sold-section {
765 padding: 80px 0;
773 padding: 120px 0;
766774 background: var(--gray-50);
767775}
768776
@@ -774,15 +782,15 @@ ul { list-style: none; }
774782
775783.sold-card {
776784 background: var(--white);
777 border-radius: 12px;
785 border-radius: 16px;
778786 overflow: hidden;
779787 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
780788 transition: all 0.4s ease;
781789}
782790
783791.sold-card:hover {
784 box-shadow: 0 16px 50px rgba(0,0,0,0.12);
785 transform: translateY(-8px);
792 box-shadow: 0 30px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(254,209,0,0.2);
793 transform: translateY(-10px);
786794}
787795
788796.sold-image {
@@ -838,7 +846,7 @@ ul { list-style: none; }
838846 ABOUT / WHY CHOOSE
839847 ============================================ */
840848.about {
841 padding: 100px 0;
849 padding: 140px 0;
842850 background: var(--white);
843851}
844852
@@ -849,6 +857,23 @@ ul { list-style: none; }
849857 align-items: center;
850858}
851859
860.about-image {
861 position: relative;
862}
863
864.about-image::after {
865 content: '';
866 position: absolute;
867 top: 20px;
868 left: 20px;
869 right: -20px;
870 bottom: -20px;
871 border: 2px solid var(--rw-yellow);
872 border-radius: 8px;
873 z-index: -1;
874 opacity: 0.4;
875}
876
852877.about-image img {
853878 width: 100%;
854879 border-radius: 8px;
@@ -859,7 +884,7 @@ ul { list-style: none; }
859884
860885.about-lead {
861886 font-family: var(--font-display);
862 font-size: 22px;
887 font-size: 26px;
863888 color: var(--text-dark);
864889 line-height: 1.5;
865890 margin-bottom: 20px;
@@ -912,7 +937,7 @@ ul { list-style: none; }
912937 ============================================ */
913938.appraisal-cta {
914939 position: relative;
915 padding: 100px 0;
940 padding: 140px 0;
916941 overflow: hidden;
917942}
918943
@@ -937,7 +962,7 @@ ul { list-style: none; }
937962
938963.appraisal-content h2 {
939964 font-family: var(--font-display);
940 font-size: 36px;
965 font-size: clamp(36px, 5vw, 52px);
941966 color: var(--white);
942967 margin-bottom: 16px;
943968}
@@ -953,7 +978,7 @@ ul { list-style: none; }
953978 TESTIMONIALS
954979 ============================================ */
955980.testimonials {
956 padding: 80px 0;
981 padding: 120px 0;
957982 background: var(--gray-50);
958983}
959984
@@ -965,15 +990,17 @@ ul { list-style: none; }
965990
966991.testimonial-card {
967992 background: var(--white);
968 padding: 36px 32px;
969 border-radius: 8px;
993 padding: 44px 36px;
994 border-radius: 12px;
970995 border: 1px solid var(--border);
996 border-top: 3px solid transparent;
971997 transition: var(--transition);
972998}
973999
9741000.testimonial-card:hover {
9751001 box-shadow: var(--shadow-md);
9761002 transform: translateY(-4px);
1003 border-top-color: var(--rw-yellow);
9771004}
9781005
9791006.testimonial-stars {
@@ -984,7 +1011,7 @@ ul { list-style: none; }
9841011}
9851012
9861013.testimonial-text {
987 font-size: 15px;
1014 font-size: 17px;
9881015 color: var(--text-body);
9891016 line-height: 1.8;
9901017 margin-bottom: 24px;
@@ -1024,7 +1051,7 @@ ul { list-style: none; }
10241051 CONTACT
10251052 ============================================ */
10261053.contact {
1027 padding: 80px 0;
1054 padding: 120px 0;
10281055 background: var(--white);
10291056}
10301057
@@ -1078,9 +1105,10 @@ ul { list-style: none; }
10781105
10791106.contact-form {
10801107 background: var(--gray-50);
1081 padding: 40px;
1082 border-radius: 8px;
1108 padding: 48px;
1109 border-radius: 12px;
10831110 border: 1px solid var(--border);
1111 box-shadow: var(--shadow-md);
10841112}
10851113
10861114.form-row {
@@ -1105,11 +1133,11 @@ ul { list-style: none; }
11051133.form-group select,
11061134.form-group textarea {
11071135 width: 100%;
1108 padding: 12px 16px;
1136 padding: 14px 18px;
11091137 font-family: var(--font-body);
11101138 font-size: 14px;
11111139 border: 1px solid var(--gray-200);
1112 border-radius: 4px;
1140 border-radius: 6px;
11131141 background: var(--white);
11141142 transition: var(--transition);
11151143 color: var(--text-dark);
@@ -1130,7 +1158,7 @@ ul { list-style: none; }
11301158 ============================================ */
11311159.footer {
11321160 background: var(--charcoal);
1133 padding: 60px 0 32px;
1161 padding: 80px 0 40px;
11341162}
11351163
11361164.footer-grid {
@@ -1213,8 +1241,8 @@ ul { list-style: none; }
12131241 ============================================ */
12141242.reveal {
12151243 opacity: 0;
1216 transform: translateY(30px);
1217 transition: opacity 0.6s ease, transform 0.6s ease;
1244 transform: translateY(40px);
1245 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
12181246}
12191247
12201248.reveal.visible {
@@ -1228,7 +1256,7 @@ ul { list-style: none; }
12281256.reveal-left {
12291257 opacity: 0;
12301258 transform: translateX(-40px);
1231 transition: opacity 0.7s ease, transform 0.7s ease;
1259 transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
12321260}
12331261.reveal-left.visible {
12341262 opacity: 1;
@@ -1237,7 +1265,7 @@ ul { list-style: none; }
12371265.reveal-scale {
12381266 opacity: 0;
12391267 transform: scale(0.92);
1240 transition: opacity 0.6s ease, transform 0.6s ease;
1268 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
12411269}
12421270.reveal-scale.visible {
12431271 opacity: 1;
@@ -1375,15 +1403,15 @@ ul { list-style: none; }
13751403.section-title::after {
13761404 content: '';
13771405 display: block;
1378 width: 60px;
1406 width: 80px;
13791407 height: 3px;
1380 background: var(--rw-yellow);
1408 background: linear-gradient(90deg, transparent, var(--rw-yellow), transparent);
13811409 margin-top: 12px;
13821410 transition: width 0.5s ease;
13831411}
13841412.section-header:hover .section-title::after,
13851413.section-title:hover::after {
1386 width: 120px;
1414 width: 160px;
13871415}
13881416
13891417/* ============================================
@@ -1412,9 +1440,248 @@ section {
14121440 top: 0;
14131441 left: 50%;
14141442 transform: translateX(-50%);
1415 width: 60px;
1443 width: 80px;
14161444 height: 2px;
1445 background: linear-gradient(90deg, transparent, var(--rw-yellow), transparent);
1446}
1447
1448/* ============================================
1449 SERVICES SHOWCASE — FULL-WIDTH SLIDER
1450 ============================================ */
1451.services-showcase {
1452 padding: 120px 0 0;
1453 background: var(--charcoal);
1454 overflow: hidden;
1455}
1456
1457.services-showcase .section-title {
1458 color: var(--white);
1459}
1460
1461.services-showcase .section-subtitle {
1462 color: rgba(255,255,255,0.6);
1463}
1464
1465.services-showcase .section-title::after {
1466 margin-left: auto;
1467 margin-right: auto;
1468}
1469
1470.services-slider {
1471 position: relative;
1472 margin-top: 64px;
1473}
1474
1475.services-track {
1476 display: flex;
1477 transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
1478}
1479
1480.service-slide {
1481 flex: 0 0 100%;
1482 position: relative;
1483 min-height: 700px;
1484 display: flex;
1485 align-items: center;
1486 overflow: hidden;
1487}
1488
1489.service-slide-bg {
1490 position: absolute;
1491 inset: 0;
1492 background-size: cover;
1493 background-position: center;
1494 transition: transform 8s ease;
1495}
1496
1497.service-slide.active .service-slide-bg {
1498 transform: scale(1.08);
1499}
1500
1501.service-slide-overlay {
1502 position: absolute;
1503 inset: 0;
1504 background: linear-gradient(135deg, rgba(30,30,30,0.92) 0%, rgba(30,30,30,0.8) 50%, rgba(30,30,30,0.65) 100%);
1505}
1506
1507.service-slide-content {
1508 position: relative;
1509 z-index: 2;
1510 max-width: 700px;
1511 padding: 80px 80px 80px 120px;
1512 opacity: 0;
1513 transform: translateY(30px);
1514 transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
1515}
1516
1517.service-slide.active .service-slide-content {
1518 opacity: 1;
1519 transform: translateY(0);
1520}
1521
1522.service-badge {
1523 display: inline-block;
1524 padding: 8px 20px;
1525 font-size: 11px;
1526 font-weight: 700;
1527 letter-spacing: 2px;
1528 text-transform: uppercase;
1529 color: var(--charcoal);
14171530 background: var(--rw-yellow);
1531 margin-bottom: 24px;
1532}
1533
1534.service-badge.gold {
1535 background: linear-gradient(135deg, #C89E00, #FED100, #FFE566, #FED100);
1536}
1537
1538.service-slide-content h3 {
1539 font-family: var(--font-display);
1540 font-size: clamp(32px, 4vw, 48px);
1541 font-weight: 600;
1542 color: var(--white);
1543 margin-bottom: 16px;
1544 line-height: 1.2;
1545}
1546
1547.service-description {
1548 font-size: 17px;
1549 color: rgba(255,255,255,0.7);
1550 line-height: 1.7;
1551 margin-bottom: 32px;
1552}
1553
1554.service-features-list {
1555 list-style: none;
1556 display: grid;
1557 grid-template-columns: 1fr 1fr;
1558 gap: 12px 32px;
1559 margin-bottom: 40px;
1560}
1561
1562.service-features-list li {
1563 font-size: 14px;
1564 color: rgba(255,255,255,0.8);
1565 padding-left: 24px;
1566 position: relative;
1567 line-height: 1.6;
1568}
1569
1570.service-features-list li::before {
1571 content: '\2713';
1572 position: absolute;
1573 left: 0;
1574 color: var(--rw-yellow);
1575 font-weight: 700;
1576}
1577
1578.service-price-tag {
1579 display: flex;
1580 align-items: baseline;
1581 gap: 12px;
1582 margin-bottom: 36px;
1583 padding: 24px 0;
1584 border-top: 1px solid rgba(255,255,255,0.1);
1585 border-bottom: 1px solid rgba(255,255,255,0.1);
1586}
1587
1588.service-price-label {
1589 font-size: 13px;
1590 color: rgba(255,255,255,0.5);
1591 text-transform: uppercase;
1592 letter-spacing: 1.5px;
1593}
1594
1595.service-price-amount {
1596 font-family: var(--font-display);
1597 font-size: 42px;
1598 font-weight: 700;
1599 color: var(--rw-yellow);
1600}
1601
1602.service-price-note {
1603 font-size: 13px;
1604 color: rgba(255,255,255,0.5);
1605}
1606
1607.services-controls {
1608 position: absolute;
1609 bottom: 40px;
1610 right: 80px;
1611 display: flex;
1612 align-items: center;
1613 gap: 16px;
1614 z-index: 5;
1615}
1616
1617.services-arrow {
1618 width: 52px;
1619 height: 52px;
1620 background: rgba(255,255,255,0.1);
1621 backdrop-filter: blur(10px);
1622 border: 2px solid rgba(255,255,255,0.2);
1623 border-radius: 50%;
1624 display: flex;
1625 align-items: center;
1626 justify-content: center;
1627 cursor: pointer;
1628 transition: all 0.3s ease;
1629 color: var(--white);
1630}
1631
1632.services-arrow:hover {
1633 background: var(--rw-yellow);
1634 border-color: var(--rw-yellow);
1635 color: var(--charcoal);
1636 transform: scale(1.1);
1637 box-shadow: 0 4px 20px rgba(254,209,0,0.4);
1638}
1639
1640.services-dots {
1641 display: flex;
1642 gap: 8px;
1643}
1644
1645.services-dot {
1646 width: 14px;
1647 height: 14px;
1648 border-radius: 50%;
1649 border: 2px solid rgba(255,255,255,0.4);
1650 background: transparent;
1651 cursor: pointer;
1652 transition: all 0.3s ease;
1653}
1654
1655.services-dot:hover {
1656 border-color: var(--white);
1657}
1658
1659.services-dot.active {
1660 background: var(--rw-yellow);
1661 border-color: var(--rw-yellow);
1662 box-shadow: 0 0 12px rgba(254,209,0,0.5);
1663}
1664
1665.services-progress {
1666 position: absolute;
1667 bottom: 0;
1668 left: 0;
1669 right: 0;
1670 height: 3px;
1671 background: rgba(255,255,255,0.1);
1672 z-index: 5;
1673}
1674
1675.services-progress-bar {
1676 height: 100%;
1677 background: var(--rw-yellow);
1678 width: 0%;
1679 transition: none;
1680}
1681
1682.services-progress-bar.animate {
1683 width: 100%;
1684 transition: width 8s linear;
14181685}
14191686
14201687/* ============================================
@@ -1438,6 +1705,16 @@ section {
14381705 grid-template-columns: repeat(2, 1fr);
14391706 gap: 24px;
14401707 }
1708
1709 .service-slide-content {
1710 padding: 60px 40px;
1711 }
1712 .service-features-list {
1713 grid-template-columns: 1fr;
1714 }
1715 .services-controls {
1716 right: 40px;
1717 }
14411718}
14421719
14431720@media (max-width: 768px) {
@@ -1513,6 +1790,23 @@ section {
15131790 .stat-number, .stat-prefix, .stat-suffix {
15141791 font-size: 32px;
15151792 }
1793
1794 .service-slide {
1795 min-height: 600px;
1796 }
1797 .service-slide-content {
1798 padding: 40px 24px;
1799 }
1800 .services-controls {
1801 right: 24px;
1802 bottom: 24px;
1803 }
1804 .service-price-tag {
1805 flex-wrap: wrap;
1806 }
1807 .services-showcase {
1808 padding: 80px 0 0;
1809 }
15161810}
15171811
15181812@media (max-width: 480px) {
15191813
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts