/* ============================================================ SAIR SPATA PREMIUM — Tours, Travel & Event Management Enhanced Edition: animations, interactions, premium effects ============================================================ */ /* Google Fonts moved to tags in (with preconnect) for non-blocking load — see HTML */ :root{ --green-950:#0a2e1c; --green-900:#0d3f26; --green:#075033; --green-700:#0e6b45; --green-100:#e3ede6; --orange:#dc7808; --orange-600:#c26a06; --orange-text:#b06006; /* AA-accessible (4.6:1 on white) variant of --orange for small/normal body text */ --orange-100:#fce9d3; --cream:#fbf6ec; --sand:#f1e6ce; --sand-200:#f7f0de; --ink:#1e2620; --ink-soft:#4d564e; --white:#ffffff; --line: rgba(7,80,51,0.16); --display: "Fraunces", serif; --body: "Work Sans", sans-serif; --mono: "Space Mono", monospace; --radius: 18px; --shadow: 0 18px 40px -20px rgba(7,40,25,0.35); --shadow-lg: 0 30px 60px -25px rgba(7,40,25,0.45); --container: 1160px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{font-family:var(--display);margin:0 0 .5em;color:var(--green-950);font-weight:600;line-height:1.15;} p{margin:0 0 1em;color:var(--ink-soft);} .container{max-width:var(--container);margin:0 auto;padding:0 24px;} section{padding:100px 0;position:relative;} @media(max-width:720px){section{padding:64px 0;}} /* ========== PRELOADER ========== */ .preloader{ position:fixed;inset:0;z-index:9999; background:var(--green-950); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px; transition:opacity .8s ease, visibility .8s ease; } .preloader.done{opacity:0;visibility:hidden;pointer-events:none;} .preloader-logo{ width:100px;height:100px; animation:preloaderPulse 1.5s ease-in-out infinite; } .preloader-bar{ width:180px;height:3px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden; } .preloader-bar-inner{ height:100%;width:0%;background:var(--orange);border-radius:3px; animation:preloaderLoad 1.8s ease forwards; } .preloader-text{ font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.5); } @keyframes preloaderPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} } @keyframes preloaderLoad{ 0%{width:0%;} 50%{width:60%;} 100%{width:100%;} } /* ========== NOISE OVERLAY ========== */ .noise-overlay{ position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; } /* ========== BACK TO TOP ========== */ .back-to-top{ position:fixed;right:20px;bottom:90px;z-index:150; width:48px;height:48px;border-radius:50%; background:var(--green);color:var(--white); display:flex;align-items:center;justify-content:center; border:none;cursor:pointer;opacity:0;transform:translateY(20px); transition:all .3s ease;box-shadow:var(--shadow); } .back-to-top.visible{opacity:1;transform:translateY(0);} .back-to-top:hover{background:var(--orange);transform:translateY(-3px);} .back-to-top svg{width:20px;height:20px;} /* ========== STICKY MOBILE CTA ========== */ .sticky-mobile-cta{ position:fixed;bottom:0;left:0;right:0;z-index:200; background:var(--green-950);padding:12px 20px; display:none;align-items:center;justify-content:center;gap:12px; box-shadow:0 -4px 20px rgba(0,0,0,0.2); } .sticky-mobile-cta .btn{padding:12px 24px;font-size:14px;} @media(max-width:720px){.sticky-mobile-cta{display:flex;}} /* ========== SKIP LINK ========== */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:10000; background:var(--green-950,#0a2e1c);color:#fff;padding:12px 20px; border-radius:0 0 8px 0;font-weight:600;text-decoration:none; } .skip-link:focus{left:0;} /* ========== FOCUS ========== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--orange);outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* ========== BUTTONS ========== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 28px;border-radius:999px;font-family:var(--body);font-weight:600;font-size:15px; border:1.5px solid transparent;cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space:nowrap;position:relative;overflow:hidden; } .btn::before{ content:'';position:absolute;inset:0;background:rgba(255,255,255,0); transition:background .2s ease; } .btn:hover::before{background:rgba(255,255,255,0.1);} .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--orange);color:var(--white);box-shadow:0 10px 28px -10px rgba(220,120,8,0.55);} .btn-primary:hover{background:var(--orange-600);box-shadow:0 14px 32px -8px rgba(220,120,8,0.65);} .btn-outline{background:transparent;border-color:var(--green);color:var(--green);} .btn-outline:hover{background:var(--green);color:var(--white);} .btn-ghost-light{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.5);color:var(--white);} .btn-ghost-light:hover{background:var(--white);color:var(--green-950);} .btn-sm{padding:10px 18px;font-size:13.5px;} .btn svg, .btn i{width:18px;height:18px;flex-shrink:0;} /* Magnetic button effect container */ .magnetic-wrap{display:inline-block;position:relative;} /* ========== HEADER / NAV ========== */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(251,246,236,0.92); backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line); transition:box-shadow .3s ease; } .site-header.scrolled{box-shadow:0 4px 30px rgba(7,40,25,0.1);} .nav{ display:flex;align-items:center;justify-content:space-between; padding:14px 0; } .brand{display:flex;align-items:center;gap:12px;} .brand img{height:46px;width:46px;object-fit:contain;transition:transform .3s ease;} .brand:hover img{transform:scale(1.05) rotate(-3deg);} .brand-text{display:flex;flex-direction:column;line-height:1.1;} .brand-text strong{font-family:var(--display);font-size:20px;color:var(--green-950);letter-spacing:.01em;} .brand-text span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-600);} .nav-links{display:flex;align-items:center;gap:2px;} .nav-links a{ padding:10px 16px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--green-950); position:relative;transition:background .2s ease, color .2s ease; } .nav-links a:hover{background:var(--green-100);} .nav-links a.active{background:var(--green);color:var(--white);} .nav-cta{display:flex;align-items:center;gap:10px;} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;} .nav-toggle span{display:block;width:24px;height:2px;background:var(--green-950);margin:5px 0;border-radius:2px;transition:all .3s ease;} .nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);} .nav-toggle.active span:nth-child(2){opacity:0;} .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);} @media(max-width:920px){ .nav-links{ position:fixed;inset:70px 16px auto 16px; background:var(--white);border-radius:16px;box-shadow:var(--shadow); flex-direction:column;align-items:stretch;padding:10px;gap:2px; display:none;border:1px solid var(--line); animation:menuSlide .3s ease forwards; } .nav-links.open{display:flex;} @keyframes menuSlide{ from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} } .nav-links a{padding:14px 16px;} .nav-toggle{display:block;} .nav-cta .btn-outline{display:none;} } /* ========== HERO ========== */ .hero{ position:relative;overflow:hidden; background:radial-gradient(120% 140% at 15% 0%, var(--green-700) 0%, var(--green-950) 62%); color:var(--white);padding:140px 0 110px; } .hero .container{position:relative;z-index:2;} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;}} .hero-eyebrow{ font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--orange-100);opacity:.9;display:flex;align-items:center;gap:10px;margin-bottom:18px; } .hero h1{ color:var(--white);font-size:clamp(36px,5.2vw,62px);max-width:15ch; } .hero h1 em{color:var(--orange);font-style:normal;} .hero p.lead{color:rgba(255,255,255,0.85);font-size:18px;max-width:48ch;line-height:1.7;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;} .hero-stats{display:flex;gap:32px;margin-top:48px;flex-wrap:wrap;} .hero-stats div{border-left:2px solid var(--orange);padding-left:16px;} .hero-stats strong{display:block;font-family:var(--display);font-size:28px;color:var(--white);} .hero-stats span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.6);} .hero-art{position:relative;} .hero-route-svg{width:100%;height:auto;} /* Floating particles in hero */ .hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;} .hero-particles span{ position:absolute;width:4px;height:4px;background:var(--orange);border-radius:50%;opacity:.3; animation:particleFloat 8s ease-in-out infinite; } .hero-particles span:nth-child(1){left:10%;top:20%;animation-delay:0s;} .hero-particles span:nth-child(2){left:30%;top:60%;animation-delay:2s;} .hero-particles span:nth-child(3){left:70%;top:30%;animation-delay:4s;} .hero-particles span:nth-child(4){left:85%;top:70%;animation-delay:1s;} .hero-particles span:nth-child(5){left:50%;top:80%;animation-delay:3s;} @keyframes particleFloat{ 0%,100%{transform:translateY(0) scale(1);opacity:.3;} 50%{transform:translateY(-40px) scale(1.5);opacity:.6;} } .page-hero{ background:linear-gradient(180deg, var(--green-950), var(--green-900)); color:var(--white);padding:90px 0 70px;position:relative;overflow:hidden; } .page-hero h1{color:var(--white);font-size:clamp(32px,4.6vw,48px);max-width:18ch;} .page-hero p{color:rgba(255,255,255,.82);max-width:52ch;font-size:17px;} .breadcrumb{ font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--orange-100);opacity:.85;margin-bottom:16px;display:flex;gap:8px;align-items:center; } /* ========== SECTION HEADERS ========== */ .section-head{max-width:640px;margin-bottom:56px;} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} .section-head h2{font-size:clamp(28px,3.6vw,40px);} /* ========== BOARDING PASS CARDS (3D TILT) ========== */ .pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} @media(max-width:980px){.pass-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){.pass-grid{grid-template-columns:1fr;}} .pass{ background:var(--white);border-radius:18px;box-shadow:var(--shadow); overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line); transition:transform .4s ease, box-shadow .4s ease; transform-style:preserve-3d;perspective:1000px; } .pass:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);} .pass-top{padding:24px 26px 20px;position:relative;} .pass-route{ display:flex;align-items:center;justify-content:space-between; font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--green-700);margin-bottom:14px; } .pass-route .code{font-size:19px;font-weight:700;color:var(--green-950);} .pass-route .plane{color:var(--orange);} .pass-top h3{font-size:21px;margin-bottom:8px;} .pass-top p{font-size:14.5px;margin-bottom:0;} .pass-perf{position:relative;height:0;border-top:2px dashed var(--line);margin:0;} .pass-perf::before,.pass-perf::after{ content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--cream); } .pass-perf::before{left:-9px;} .pass-perf::after{right:-9px;} .pass-bottom{ padding:18px 26px 22px;background:var(--sand-200); display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; } .pass-bottom .tag{ font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft); } .pass-bottom .price{font-family:var(--display);font-weight:600;color:var(--orange-600);font-size:18px;} /* ========== GENERIC CARDS ========== */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} @media(max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){.card-grid{grid-template-columns:1fr;}} .card-grid.cols-4{grid-template-columns:repeat(4,1fr);} @media(max-width:980px){.card-grid.cols-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){.card-grid.cols-4{grid-template-columns:1fr;}} a.card{text-decoration:none;color:inherit;display:block;} .card{ background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px; box-shadow:0 10px 28px -18px rgba(7,40,25,0.22); transition:transform .3s ease, box-shadow .3s ease; } .card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(7,40,25,0.3);} .card .icon{ width:54px;height:54px;border-radius:14px;background:var(--green-100);color:var(--green); display:flex;align-items:center;justify-content:center;margin-bottom:18px; transition:transform .3s ease, background .3s ease; } .card:hover .icon{transform:scale(1.1) rotate(-5deg);background:var(--green);color:var(--white);} .card .icon svg{width:26px;height:26px;} .card h3{font-size:19px;} .card p{font-size:14.5px;margin-bottom:0;} /* alt bg sections */ .section-alt{background:var(--sand);} .section-green{background:var(--green-950);color:var(--white);} .section-green h2, .section-green h3{color:var(--white);} .section-green p{color:rgba(255,255,255,0.78);} /* ========== TWO-COLUMN FEATURE ========== */ .feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;} @media(max-width:860px){.feature{grid-template-columns:1fr;}} .feature.reverse .feature-media{order:2;} @media(max-width:860px){.feature.reverse .feature-media{order:0;}} .feature-media{ border-radius:20px;overflow:hidden;background:var(--green-100); aspect-ratio:4/3.1;display:flex;align-items:center;justify-content:center;position:relative; } .feature ul{margin-top:20px;} .feature ul li{ display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--ink); } .feature ul li:last-child{border-bottom:none;} .feature ul li svg{width:18px;height:18px;color:var(--orange);flex-shrink:0;margin-top:3px;} /* ========== STEPS ========== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step;} @media(max-width:920px){.steps{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.steps{grid-template-columns:1fr;}} .step{position:relative;padding-top:8px;} .step .num{ font-family:var(--mono);font-size:13px;color:var(--orange-text); display:flex;align-items:center;gap:10px;margin-bottom:10px; } .step .num::after{content:"";flex:1;height:1px;background:var(--line);} .step:last-child .num::after{display:none;} .step h4{font-size:17px;margin-bottom:6px;} .step p{font-size:14px;} /* ========== TESTIMONIALS CAROUSEL ========== */ .testi-section{overflow:hidden;} .testi-carousel{position:relative;} .testi-track{display:flex;transition:transform .5s cubic-bezier(.25,.46,.45,.94);} .testi-slide{min-width:100%;padding:0 12px;} @media(min-width:768px){.testi-slide{min-width:50%;}} @media(min-width:1024px){.testi-slide{min-width:33.333%;}} .testi{ background:var(--white);border-radius:18px;padding:28px;border:1px solid var(--line); box-shadow:0 10px 28px -18px rgba(7,40,25,0.18);height:100%; transition:transform .3s ease; } .testi:hover{transform:translateY(-4px);} .testi .stars{color:var(--orange);letter-spacing:2px;margin-bottom:12px;font-size:14px;} .testi p{font-style:italic;color:var(--ink);font-size:15px;line-height:1.7;} .testi .who{display:flex;align-items:center;gap:12px;margin-top:16px;} .testi .who .avatar{ width:42px;height:42px;border-radius:50%;background:var(--green-100);color:var(--green-950); display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:16px; } .testi .who strong{font-size:14px;display:block;color:var(--green-950);} .testi .who span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);} .testi-nav{ display:flex;justify-content:center;gap:12px;margin-top:36px; } .testi-nav button{ width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line); background:var(--white);color:var(--green);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .2s ease; } .testi-nav button:hover{background:var(--green);color:var(--white);border-color:var(--green);} .testi-nav button svg{width:20px;height:20px;} .testi-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;} .testi-dot{width:10px;height:10px;border-radius:50%;background:var(--line);border:none;cursor:pointer;transition:all .3s ease;} .testi-dot.active{background:var(--orange);width:28px;border-radius:5px;} /* ========== STATS COUNTER ========== */ .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center;} @media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr);}} .stat-item{padding:20px;} .stat-number{font-family:var(--display);font-size:clamp(36px,4vw,48px);font-weight:700;color:var(--orange);line-height:1;} .stat-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;} /* ========== CTA BAND ========== */ .cta-band{ background:linear-gradient(120deg, var(--orange) 0%, var(--orange-600) 100%); color:var(--white);border-radius:24px;padding:56px; display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap; box-shadow:0 30px 60px -25px rgba(220,120,8,0.5); position:relative;overflow:hidden; } .cta-band::before{ content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px; background:rgba(255,255,255,0.06);border-radius:50%; } .cta-band h2{color:var(--white);margin-bottom:8px;font-size:clamp(24px,3vw,34px);position:relative;} .cta-band p{color:rgba(255,255,255,0.92);margin-bottom:0;position:relative;} .cta-band .btn-primary{background:var(--white);color:var(--orange-600);box-shadow:none;position:relative;} .cta-band .btn-primary:hover{background:var(--green-950);color:var(--white);} /* ========== TEAM SECTION ========== */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} @media(max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.team-grid{grid-template-columns:1fr;}} .team-card{ background:var(--white);border-radius:18px;overflow:hidden;border:1px solid var(--line); box-shadow:0 10px 28px -18px rgba(7,40,25,0.2);transition:transform .3s ease, box-shadow .3s ease; } .team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);} .team-card-img{ height:220px;background:linear-gradient(135deg, var(--green-100), var(--sand-200)); display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; } .team-card-img svg{width:80px;height:80px;color:var(--green);opacity:.3;} .team-card-body{padding:22px;} .team-card-body h4{font-size:17px;margin-bottom:4px;} .team-card-body span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-600);} .team-card-body p{font-size:13.5px;margin-top:8px;margin-bottom:0;} /* ========== GALLERY / LIGHTBOX ========== */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:720px){.gallery-grid{grid-template-columns:repeat(2,1fr);}} .gallery-item{ aspect-ratio:4/3;border-radius:14px;overflow:hidden;cursor:pointer;position:relative; background:linear-gradient(135deg, var(--green-700), var(--green-950)); display:flex;align-items:center;justify-content:center; } .gallery-item img, .gallery-item svg{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .gallery-item:hover img, .gallery-item:hover svg{transform:scale(1.1);} .gallery-item::after{ content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%, rgba(10,46,28,0.8)); opacity:0;transition:opacity .3s ease; } .gallery-item:hover::after{opacity:1;} .gallery-item-caption{ position:absolute;bottom:0;left:0;right:0;padding:16px;color:var(--white); transform:translateY(100%);transition:transform .3s ease;z-index:2; } .gallery-item:hover .gallery-item-caption{transform:translateY(0);} .gallery-item-caption h4{font-size:15px;color:var(--white);margin-bottom:2px;} .gallery-item-caption span{font-family:var(--mono);font-size:11px;opacity:.8;} /* Lightbox */ .lightbox{ position:fixed;inset:0;z-index:1000;background:rgba(10,46,28,0.95); display:none;align-items:center;justify-content:center;padding:40px; } .lightbox.active{display:flex;animation:lightboxFade .3s ease;} @keyframes lightboxFade{from{opacity:0;}to{opacity:1;}} .lightbox-close{ position:absolute;top:24px;right:24px;width:48px;height:48px; background:rgba(255,255,255,0.1);border:none;border-radius:50%;color:var(--white); cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .2s ease; } .lightbox-close:hover{background:rgba(255,255,255,0.2);} .lightbox-content{ max-width:900px;max-height:80vh;width:100%;text-align:center; } .lightbox-content img, .lightbox-content svg{max-width:100%;max-height:70vh;border-radius:12px;} .lightbox-caption{color:var(--white);margin-top:16px;font-size:18px;} /* ========== PRICING TABLE ========== */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;} @media(max-width:860px){.pricing-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto;}} .pricing-card{ background:var(--white);border-radius:18px;padding:36px 28px;text-align:center; border:1.5px solid var(--line);box-shadow:0 10px 28px -18px rgba(7,40,25,0.2); transition:transform .3s ease, box-shadow .3s ease;position:relative; } .pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);} .pricing-card.featured{ border-color:var(--orange);transform:scale(1.03);box-shadow:0 20px 50px -20px rgba(220,120,8,0.3); } .pricing-card.featured:hover{transform:scale(1.03) translateY(-6px);} .pricing-badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--orange);color:var(--white);padding:6px 18px;border-radius:20px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700; } .pricing-card h3{font-size:20px;margin-bottom:6px;} .pricing-card .price{font-family:var(--display);font-size:42px;font-weight:700;color:var(--orange);line-height:1;margin:20px 0;} .pricing-card .price span{font-size:14px;color:var(--ink-soft);font-weight:400;font-family:var(--body);} .pricing-card ul{text-align:left;margin:24px 0;} .pricing-card ul li{ padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-soft); display:flex;align-items:center;gap:10px; } .pricing-card ul li:last-child{border-bottom:none;} .pricing-card ul li svg{width:16px;height:16px;color:var(--green);flex-shrink:0;} /* ========== FAQ ACCORDION ========== */ .faq-list{max-width:800px;margin:0 auto;} .faq-item{ background:var(--white);border-radius:14px;margin-bottom:14px;border:1px solid var(--line); overflow:hidden;box-shadow:0 4px 12px -4px rgba(7,40,25,0.08); transition:box-shadow .3s ease; } .faq-item:hover{box-shadow:0 8px 20px -8px rgba(7,40,25,0.15);} .faq-question{ padding:22px 26px;display:flex;justify-content:space-between;align-items:center; cursor:pointer;font-weight:600;color:var(--green-950);font-size:15.5px; transition:background .2s ease; } .faq-question:hover{background:var(--sand-200);} .faq-question svg{width:20px;height:20px;color:var(--orange);transition:transform .3s ease;flex-shrink:0;} .faq-item.open .faq-question svg{transform:rotate(180deg);} .faq-answer{ max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.46,.45,.94); } .faq-item.open .faq-answer{max-height:300px;} .faq-answer p{padding:0 26px 22px;color:var(--ink-soft);font-size:14.5px;line-height:1.7;margin:0;} /* ========== NEWSLETTER ========== */ .newsletter{ background:linear-gradient(135deg, var(--green-900), var(--green-950)); border-radius:24px;padding:60px;position:relative;overflow:hidden; } .newsletter::before{ content:'';position:absolute;top:-30%;right:-10%;width:300px;height:300px; background:rgba(220,120,8,0.08);border-radius:50%; } .newsletter h2{color:var(--white);font-size:clamp(24px,3vw,32px);margin-bottom:8px;position:relative;} .newsletter p{color:rgba(255,255,255,0.75);position:relative;} .newsletter-form{display:flex;gap:12px;margin-top:28px;position:relative;flex-wrap:wrap;} .newsletter-form input{ flex:1;min-width:240px;padding:14px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08);color:var(--white);font-family:var(--body);font-size:15px; } .newsletter-form input::placeholder{color:rgba(255,255,255,0.45);} .newsletter-form input:focus{border-color:var(--orange);background:rgba(255,255,255,0.12);outline:none;} .newsletter-form button{padding:14px 32px;} /* ========== FORMS ========== */ .form-card{ background:var(--white);border-radius:20px;padding:36px;box-shadow:var(--shadow);border:1px solid var(--line); } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media(max-width:600px){.form-row{grid-template-columns:1fr;}} label{display:block;font-size:13px;font-weight:600;color:var(--green-950);margin-bottom:6px;} input,select,textarea{ width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line); font-family:var(--body);font-size:14.5px;background:var(--sand-200);color:var(--ink);margin-bottom:16px; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; } input:focus,select:focus,textarea:focus{ border-color:var(--orange);background:var(--white);outline:none; box-shadow:0 0 0 3px rgba(220,120,8,0.1); } textarea{resize:vertical;min-height:120px;} input.error,textarea.error,select.error{border-color:#dc2626;background:#fef2f2;} .error-msg{color:#dc2626;font-size:12px;margin-top:-12px;margin-bottom:12px;display:none;} .error-msg.show{display:block;} /* Info list */ .info-list{display:flex;flex-direction:column;gap:20px;} .info-item{display:flex;gap:16px;align-items:flex-start;} .info-item .icon{ width:48px;height:48px;border-radius:12px;background:var(--orange-100);color:var(--orange-600); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:transform .3s ease; } .info-item:hover .icon{transform:scale(1.1) rotate(-5deg);} .info-item .icon svg{width:22px;height:22px;} .info-item h4{font-size:15.5px;margin-bottom:4px;} .info-item p{font-size:14px;margin-bottom:0;} .map-frame{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);} .map-frame iframe{width:100%;height:340px;border:0;display:block;} /* ========== FILTER TABS ========== */ .filter-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;} .filter-tab{ padding:10px 22px;border-radius:999px;border:1.5px solid var(--line);background:var(--white); font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer; transition:all .2s ease; } .filter-tab:hover{border-color:var(--green);color:var(--green);} .filter-tab.active{background:var(--green);color:var(--white);border-color:var(--green);} /* ========== BADGES ========== */ .badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .badge{ font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase; padding:8px 14px;border-radius:999px;background:var(--white);border:1px solid var(--line);color:var(--green-950); } /* ========== FOOTER ========== */ .site-footer{background:var(--green-950);color:rgba(255,255,255,0.85);padding:72px 0 24px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px;} @media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr;}} .site-footer h4{color:var(--white);font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;} .site-footer .brand-text strong{color:var(--white);} .footer-links li{margin-bottom:11px;} .footer-links a{color:rgba(255,255,255,0.72);font-size:14.5px;transition:color .2s ease, padding .2s ease;display:inline-block;} .footer-links a:hover{color:var(--orange);padding-left:4px;} .footer-about p{color:rgba(255,255,255,0.7);font-size:14.5px;max-width:32ch;} .footer-contact li{display:flex;gap:10px;margin-bottom:14px;font-size:14.5px;color:rgba(255,255,255,0.8);} .footer-contact svg{width:18px;height:18px;color:var(--orange);flex-shrink:0;margin-top:2px;} .footer-bottom{ border-top:1px solid rgba(255,255,255,0.12);padding-top:24px; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; font-size:13px;color:rgba(255,255,255,0.55); } .social-row{display:flex;gap:10px;} .social-row a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08); display:flex;align-items:center;justify-content:center;color:var(--white);transition:all .2s ease; } .social-row a:hover{background:var(--orange);transform:translateY(-3px);} .social-row svg{width:17px;height:17px;} /* ========== WHATSAPP FLOAT ========== */ .wa-float{ position:fixed;right:20px;bottom:20px;z-index:200; width:60px;height:60px;border-radius:50%; background:#25D366;color:white; display:flex;align-items:center;justify-content:center; box-shadow:0 14px 30px -10px rgba(0,0,0,0.4); animation:wa-pulse 2.4s infinite;transition:transform .2s ease; } .wa-float:hover{transform:scale(1.1);} .wa-float svg{width:30px;height:30px;} @keyframes wa-pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55), 0 14px 30px -10px rgba(0,0,0,0.4);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0), 0 14px 30px -10px rgba(0,0,0,0.4);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0), 0 14px 30px -10px rgba(0,0,0,0.4);} } /* ========== SCROLL REVEAL ========== */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94);} .reveal.in{opacity:1;transform:translateY(0);} .reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;} .reveal-delay-3{transition-delay:.3s;} .reveal-delay-4{transition-delay:.4s;} /* Text scramble effect placeholder */ .scramble-text{display:inline-block;} /* ========== PAGE TRANSITION ========== */ .page-transition{ position:fixed;inset:0;z-index:9997;background:var(--green-950); transform:translateY(100%);transition:transform .5s cubic-bezier(.76,0,.24,1); pointer-events:none; } .page-transition.active{transform:translateY(0);pointer-events:all;} /* ========== TRUST BADGES ========== */ .trust-row{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;opacity:.5;} .trust-item{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:8px;} .trust-item svg{width:20px;height:20px;color:var(--green);} /* ========== TIMELINE ========== */ .timeline{position:relative;max-width:800px;margin:0 auto;} .timeline::before{ content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%); } @media(max-width:720px){.timeline::before{left:20px;}} .timeline-item{display:flex;gap:40px;margin-bottom:50px;position:relative;} .timeline-item:nth-child(odd){flex-direction:row-reverse;text-align:right;} @media(max-width:720px){.timeline-item{flex-direction:row !important;text-align:left !important;padding-left:50px;}} .timeline-dot{ position:absolute;left:50%;transform:translateX(-50%); width:16px;height:16px;border-radius:50%;background:var(--orange);border:3px solid var(--cream);z-index:2; } @media(max-width:720px){.timeline-dot{left:20px;transform:translateX(-50%);}} .timeline-content{width:calc(50% - 40px);} @media(max-width:720px){.timeline-content{width:100%;}} .timeline-content h4{font-size:18px;margin-bottom:6px;} .timeline-content span{font-family:var(--mono);font-size:11px;color:var(--orange-600);} .timeline-content p{font-size:14px;margin-top:8px;} /* ========== RESPONSIVE TWEAKS ========== */ @media(max-width:720px){ .hero{padding:100px 0 80px;} .hero-stats{gap:20px;} .hero-stats strong{font-size:22px;} .cta-band{padding:36px 24px;} .newsletter{padding:36px 24px;} .pricing-card.featured{transform:scale(1);} .pricing-card.featured:hover{transform:scale(1) translateY(-6px);} }