/* ========================================================= TEMPO TRAVELLER RENTAL PAGE — JAY KHODIYAR TRAVELS File: css/tempo-traveller.css Load AFTER css/style.css so these rules can extend it. Uses the "Outfit" font + Font Awesome already linked in . NOTE: Header, top-bar, nav, hamburger, and footer CSS have been removed from this file — those are now handled fully by css/style.css to avoid duplication/conflicts. ========================================================= */ :root{ --tt-navy: #0b2545; --tt-navy-light: #123a6b; --tt-orange: #f5821f; --tt-orange-dark: #d96a0f; --tt-cream: #fff8f2; --tt-grey: #5c6b7a; --tt-border: #e7ebef; --tt-white: #ffffff; --tt-radius: 14px; --tt-shadow: 0 12px 34px rgba(11, 37, 69, 0.10); --tt-shadow-hover: 0 20px 44px rgba(11, 37, 69, 0.16); --tt-ease: cubic-bezier(.22,.9,.32,1); } /* ----------------------------------------- BASE / FALLBACK — in case css/style.css does not already define these ------------------------------------------ */ body{ font-family:'Outfit', sans-serif; } .container{max-width:1200px;margin:0 auto;padding:0 20px;} /* Generic button styles (used across CTA banner, hero actions, etc.) */ .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px; font-weight:700;font-size:14px;text-decoration:none;border:none;cursor:pointer; transition:all .25s var(--tt-ease);} .btn-primary{background:var(--tt-orange);color:#fff;} .btn-primary:hover{background:var(--tt-orange-dark);transform:translateY(-2px);box-shadow:0 10px 20px rgba(245,130,31,.3);color:#fff;} /* Back to top floating button */ .back-to-top{ position:fixed;bottom:26px;right:26px;width:46px;height:46px;border-radius:50%; background:var(--tt-navy);color:#fff;display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transform:translateY(16px);transition:all .3s ease;z-index:998; } .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);} .back-to-top:hover{background:var(--tt-orange);} /* ========================================================= SHARED SECTION UTILITIES ========================================================= */ .tt-section{padding:80px 0;} .tt-why-section{background:var(--tt-cream);} .tt-section-head{text-align:center;max-width:680px;margin:0 auto 48px;} .tt-section-head h2{font-size:clamp(24px,3.5vw,32px);color:var(--tt-navy);font-weight:800;margin-bottom:14px;} .tt-section-head p{color:var(--tt-grey);font-size:15.5px;} .tt-eyebrow{ display:inline-block;color:var(--tt-orange);font-weight:700;letter-spacing:1.6px; text-transform:uppercase;font-size:12.5px;margin-bottom:12px;position:relative;padding-left:26px; } .tt-eyebrow::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:18px;height:2px;background:var(--tt-orange); } /* ========================================================= PAGE HEADER — same structure/behaviour as the About page, just with a Tempo Traveller background photo + dark overlay so the white title stays readable on any image. ========================================================= */ .page-header{ position:relative;padding:70px 0;text-align:center;overflow:hidden; } .tt-page-header{ background: linear-gradient(135deg, rgba(11,37,69,.88) 0%, rgba(18,58,107,.82) 100%), url("../images/tempo-traveller-ahmedabad.jpg") center/cover no-repeat; } .page-header h1{ color:#fff;font-size:clamp(26px,4vw,36px);font-weight:800;margin-bottom:12px; } .breadcrumb-nav{font-size:14px;color:#cfd9e8;} .breadcrumb-nav a{color:#fff;font-weight:600;text-decoration:none;} .breadcrumb-nav span{margin:0 8px;color:#9db0cc;} /* ========================================================= INTRO SECTION — image on one side, copy + CTAs on the other (mirrors the About page layout) ========================================================= */ .tt-intro-img{ position:relative;border-radius:var(--tt-radius);overflow:hidden;box-shadow:var(--tt-shadow); } .tt-intro-img img{ width:100%;height:100%;min-height:340px;object-fit:cover;display:block; transition:transform .6s var(--tt-ease); } .tt-intro-img:hover img{transform:scale(1.04);} .tt-intro-badge{ position:absolute;bottom:20px;left:20px;background:#fff;color:var(--tt-navy); padding:14px 20px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.15); font-size:13px;font-weight:600;line-height:1.3;max-width:170px; } .tt-intro-badge span{display:block;font-size:24px;font-weight:800;color:var(--tt-orange);} .tt-intro h2{font-size:clamp(24px,3.4vw,32px);color:var(--tt-navy);font-weight:800;margin:10px 0 18px;line-height:1.3;} .tt-intro-text{color:var(--tt-grey);font-size:15.5px;margin-bottom:16px;} .tt-hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;} .btn-ghost-dark{background:transparent;color:var(--tt-navy);border:2px solid var(--tt-border);} .btn-ghost-dark:hover{background:var(--tt-navy);color:#fff;border-color:var(--tt-navy);transform:translateY(-2px);} @media (max-width: 767px){ .tt-intro-img img{min-height:240px;} } /* ========================================================= FLEET CARDS ========================================================= */ .tt-fleet-card{ background:var(--tt-white);border:1px solid var(--tt-border);border-radius:var(--tt-radius); padding:34px 28px;box-shadow:var(--tt-shadow);height:100%;position:relative; transition:transform .35s var(--tt-ease), box-shadow .35s var(--tt-ease), border-color .35s ease; overflow:hidden; } .tt-fleet-card::before{ content:"";position:absolute;left:0;top:0;height:4px;width:100%; background:linear-gradient(90deg,var(--tt-orange),var(--tt-navy)); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--tt-ease); } .tt-fleet-card:hover::before{transform:scaleX(1);} .tt-fleet-card:hover{transform:translateY(-10px);box-shadow:var(--tt-shadow-hover);border-color:transparent;} .tt-fleet-featured{border:2px solid var(--tt-orange);} .tt-featured-tag{ position:absolute;top:18px;right:-34px;background:var(--tt-orange);color:#fff;font-size:11px; font-weight:800;letter-spacing:.5px;padding:5px 40px;transform:rotate(40deg);text-transform:uppercase; } .tt-seat-badge{ width:64px;height:64px;border-radius:50%;background:var(--tt-cream); display:flex;align-items:center;justify-content:center;flex-direction:column; margin-bottom:20px;border:2px solid var(--tt-orange);position:relative; } .tt-seat-badge i{font-size:16px;color:var(--tt-orange);position:absolute;top:-9px;background:#fff;padding:0 4px;} .tt-seat-badge span{font-weight:800;color:var(--tt-navy);font-size:20px;} .tt-fleet-card h3{font-size:19px;color:var(--tt-navy);margin-bottom:10px;font-weight:700;} .tt-fleet-card p{color:var(--tt-grey);font-size:14.5px;margin-bottom:18px;} .tt-tag-list{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0 0 22px;padding:0;} .tt-tag-list li{ background:var(--tt-cream);color:var(--tt-navy);font-size:12px;font-weight:700; padding:6px 12px;border-radius:20px; } .tt-card-link{ color:var(--tt-navy);font-weight:700;font-size:14px;text-decoration:none;display:inline-flex; align-items:center;gap:8px;transition:gap .25s ease, color .25s ease; } .tt-card-link i{font-size:12px;transition:transform .25s ease;} .tt-card-link:hover{color:var(--tt-orange);gap:12px;} .tt-card-link:hover i{transform:translateX(3px);} .tt-fleet-note{text-align:center;color:var(--tt-grey);max-width:720px;margin:40px auto 0;font-size:14.5px;} /* ========================================================= WHY CHOOSE US ========================================================= */ .tt-why-card{ background:var(--tt-white);border-radius:var(--tt-radius);padding:30px 18px;text-align:center; box-shadow:var(--tt-shadow);height:100%;transition:transform .3s var(--tt-ease), box-shadow .3s ease; } .tt-why-card:hover{transform:translateY(-8px);box-shadow:var(--tt-shadow-hover);} .tt-why-icon{ width:56px;height:56px;border-radius:50%;margin:0 auto 16px; background:linear-gradient(135deg,var(--tt-navy),var(--tt-navy-light)); display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px; transition:transform .35s var(--tt-ease), background .35s ease; } .tt-why-card:hover .tt-why-icon{ background:linear-gradient(135deg,var(--tt-orange),var(--tt-orange-dark)); transform:rotate(-8deg) scale(1.08); } .tt-why-card h4{font-size:14.5px;line-height:1.45;color:var(--tt-navy);font-weight:700;margin:0;} /* ========================================================= CTA BANNER ========================================================= */ .tt-cta-wrap{padding-top:0;} .tt-cta-banner{ position:relative;overflow:hidden;text-align:center;border-radius:20px;padding:56px 30px; background:linear-gradient(135deg,var(--tt-orange) 0%,var(--tt-orange-dark) 100%); color:#fff; } .tt-cta-shape{ position:absolute;width:280px;height:280px;border-radius:50%; background:rgba(255,255,255,.08);top:-90px;left:-60px; animation:tt-float 9s ease-in-out infinite; } @keyframes tt-float{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-20px,20px);} } .tt-cta-banner h2{color:#fff;font-size:clamp(22px,3.4vw,28px);margin-bottom:14px;font-weight:800;position:relative;z-index:2;} .tt-cta-banner p{color:#fff2e6;max-width:620px;margin:0 auto 28px;font-size:15.5px;position:relative;z-index:2;} .btn-light{background:#fff;color:var(--tt-orange-dark);position:relative;z-index:2;} .btn-light:hover{background:var(--tt-navy);color:#fff;transform:translateY(-2px);} /* ========================================================= FAQ ACCORDION ========================================================= */ .tt-faq-list{max-width:840px;margin:0 auto;} .tt-faq-item{ border:1px solid var(--tt-border);border-radius:12px;margin-bottom:14px;overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease;background:#fff; } .tt-faq-item:hover{border-color:var(--tt-orange);} .tt-faq-item.active{box-shadow:var(--tt-shadow);} .tt-faq-question{ width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left; padding:20px 24px;cursor:pointer;font-weight:700;font-size:15.5px;color:var(--tt-navy); background:none;border:none;font-family:inherit; } .tt-faq-question i{color:var(--tt-orange);font-size:14px;transition:transform .3s var(--tt-ease);} .tt-faq-item.active .tt-faq-question i{transform:rotate(135deg);} .tt-faq-answer{max-height:0;overflow:hidden;transition:max-height .35s var(--tt-ease);background:var(--tt-cream);} .tt-faq-answer p{padding:0 24px 20px;color:var(--tt-grey);font-size:14.5px;margin:0;} /* ========================================================= SCROLL REVEAL ANIMATION ========================================================= */ [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--tt-ease), transform .7s var(--tt-ease); } [data-reveal].tt-in-view{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1;transform:none;transition:none;} .tt-cta-shape{animation:none;} .tt-intro-img:hover img{transform:none;} } /* ========================================================= RESPONSIVE (page-specific only — nav/header responsive rules removed, handled by style.css) ========================================================= */ @media (max-width: 767px){ .tt-section{padding:56px 0;} .tt-hero{padding:60px 0 56px;} .tt-hero-actions{flex-direction:column;} .tt-hero-actions .btn{width:100%;justify-content:center;} }