/* =========================================================== YATHARTH TOUR & TRAVELS — MASTER STYLESHEET Used by: index.html · packages.html · about.html · contact.html Fonts : Fraunces (headings) · Inter (body) · Poppins (labels/buttons) Theme : data-theme="dark" / data-theme="light" on Motif : "Orchard row" contour-line divider + apple-orchard palette TABLE OF CONTENTS 1. Design tokens (fonts, radii, easing, colors) 2. Theme variables (dark / light) 3. Reset & base elements 4. Typography & layout utilities 5. Buttons & links 6. Preloader 7. Eco banner (marquee) 8. Header, nav & music player 9. Hero (+ small page-hero variant) 10. Orchard divider (signature element) 11. Scroll-reveal animations 12. About / story section 13. Reusable "why" card grid (Why Maraog, Hidden Gems, Travel Info) 14. Counters 15. Tour packages (grid, filters, expandable cards) 16. Quick-contact cards 17. Activities row 18. Why-choose-us grid 19. Gallery masonry 20. Testimonials 21. Mission strip 22. Contact CTA strip 23. Contact page (office panel, branch cards, map, form) 24. Footer 25. Floating action buttons 26. Lead popup modal 27. Mobile bottom nav 28. Responsive nav drawer 29. Timer & Package Graphics =========================================================== */ /* =========================================================== 1. DESIGN TOKENS =========================================================== */ :root{ --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-accent:'Poppins', sans-serif; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --ease:cubic-bezier(.22,1,.36,1); --container:1240px; --orchard:#B5452B; --orchard-light:#D9684A; --gold:#C9A227; } /* =========================================================== 2. THEME VARIABLES =========================================================== */ [data-theme="dark"]{ --bg:#0E1F19; --bg-soft:#13281F; --bg-elevated:#172E24; --ink:#F4F1E8; --ink-soft:#C7D2C7; --ink-mute:#8FA08F; --line:rgba(244,241,232,0.10); --pine:#1F4032; --shadow:0 24px 60px -20px rgba(0,0,0,.55); --glass:rgba(23,46,36,0.55); color-scheme: dark; } [data-theme="light"]{ --bg:#F8F6EF; --bg-soft:#F0EEE2; --bg-elevated:#FFFFFF; --ink:#15291F; --ink-soft:#3C4C40; --ink-mute:#6B7B6B; --line:rgba(21,41,31,0.10); --pine:#E7EEE3; --shadow:0 24px 60px -24px rgba(20,40,30,.25); --glass:rgba(255,255,255,0.55); color-scheme: light; } /* =========================================================== 3. RESET & BASE ELEMENTS =========================================================== */ *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} } body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s var(--ease), color .4s var(--ease); } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} ul{list-style:none;} button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;} input,select,textarea{font-family:inherit; font-size:1rem;} :focus-visible{outline:3px solid var(--orchard-light); outline-offset:3px;} /* =========================================================== 4. TYPOGRAPHY & LAYOUT UTILITIES =========================================================== */ .container{max-width:var(--container); margin:0 auto; padding:0 24px;} h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-0.01em;} h2{font-size:clamp(2rem,4vw,2.85rem);} h3{font-size:1.3rem;} .eyebrow{ font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; color: var(--orchard-light); margin-bottom: .6rem; display: block; line-height: 1.4; } .center{text-align:center; margin-left:auto; margin-right:auto;} .section-sub{max-width:560px; color:var(--ink-soft); margin-top:.6rem; margin-bottom:2.6rem;} .section{padding:5rem 0;} @media (max-width:768px){ .section{padding:3rem 0;} } /* Fleet Specific Glassmorphism */ .glass-card { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: all 0.4s var(--ease); } .glass-card:hover { transform: translateY(-10px); background: var(--bg-elevated); border-color: var(--orchard-light); box-shadow: var(--shadow); } .fleet-badge { background: rgba(181, 69, 43, 0.1); color: var(--orchard); padding: 4px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; } /* Timeline & Video Section */ .timeline-item { position: relative; padding-left: 2rem; border-left: 2px dashed var(--line); } .testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .testimonial-card { background: linear-gradient(145deg, var(--bg-elevated), rgba(181, 69, 43, 0.04)); border: 1px solid var(--line); border-radius: 28px; padding: 1.15rem; box-shadow: var(--shadow); position: relative; overflow: hidden; } .testimonial-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(181, 69, 43, 0.08), transparent 55%); pointer-events: none; } .testimonial-card--accent { background: linear-gradient(145deg, rgba(201, 162, 39, 0.08), var(--bg-elevated)); } .testimonial-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(181, 69, 43, 0.12); color: var(--orchard); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.9rem; } .testimonial-badge--gold { background: rgba(201, 162, 39, 0.15); color: var(--gold); } .testimonial-video { border-radius: 20px; margin-bottom: 1rem; } .testimonial-body { padding: 0 0.2rem 0.2rem; } .testimonial-profile { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; } .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; } .avatar--orchard { background: linear-gradient(135deg, var(--orchard), var(--orchard-light)); } .avatar--gold { background: linear-gradient(135deg, var(--gold), #E2B23A); } .testimonial-profile h4 { font-size: 1rem; margin-bottom: 0.15rem; } .testimonial-profile p { font-size: 0.8rem; color: var(--ink-mute); } .testimonial-body blockquote { font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1rem; font-style: italic; } @media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } } .timeline-item::before { content: ''; position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--orchard); border: 4px solid var(--bg-elevated); } .video-card { aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; } .video-card video { width: 100%; height: 100%; object-fit: cover; } .video-card img { opacity: 0.6; transition: transform 0.5s var(--ease); } .video-card:hover img { transform: scale(1.05); } .play-btn-anim { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(181, 69, 43, 0.9); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.5rem; animation: pulse-gold 2s infinite; } /* Hotel Gallery Modal Styles */ .hotel-gallery-modal #galleryThumbs img { width: 100px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.5; transition: all 0.3s var(--ease); flex-shrink: 0; border: 2px solid transparent; } .hotel-gallery-modal #galleryThumbs img.active { opacity: 1; border-color: var(--gold); transform: scale(1.05); } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; backdrop-filter: blur(4px); transition: all 0.3s; opacity: 0; } .hotel-gallery-modal .modal:hover .gallery-nav-btn { opacity: 1; } .gallery-nav-btn:hover { background: var(--gold); color: white; } /* Hotel Specific Styles */ .hotel-amenity-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--ink-soft); } @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(181, 69, 43, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(181, 69, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(181, 69, 43, 0); } } /* =========================================================== 5. BUTTONS & LINKS =========================================================== */ .btn{ font-family:var(--font-accent); font-weight:600; font-size:.92rem; padding:.95rem 1.8rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height: 48px; /* Touch target safety */ transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .btn-primary{ background:var(--orchard); color:#fff; box-shadow:0 10px 30px -10px rgba(181,69,43,.6); position:relative; overflow:hidden; } .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(181,69,43,.7);} /* subtle diagonal shimmer sweeping across primary buttons */ .btn-primary::after{ content:''; position:absolute; top:-50%; left:-60%; width:20%; height:200%; background:rgba(255,255,255,.2); transform:rotate(30deg); animation:shimmer 4s infinite; } @keyframes shimmer{0%{left:-60%;} 15%,100%{left:150%;}} .btn-ghost{border:1.5px solid var(--line); color:var(--ink);} .btn-ghost:hover{border-color:var(--orchard-light); color:var(--orchard-light);} .btn-sm{padding:.7rem 1.3rem; font-size:.82rem;} .link-arrow{font-family:var(--font-accent); font-weight:600; font-size:.9rem; color:var(--orchard-light); border-bottom:1px solid transparent; transition:border-color .25s;} .link-arrow:hover{border-color:currentColor;} /* =========================================================== 7. ECO BANNER (MARQUEE) =========================================================== */ .eco-banner{ background:linear-gradient(90deg,#274F3C,#1B3A2C); color:#EFE6CE; overflow:hidden; white-space:nowrap; position:relative; z-index:60; font-family:var(--font-accent); font-size:.78rem; font-weight:500; } .eco-banner__track{display:inline-flex; gap:4rem; padding:.5rem 0; animation:marquee 28s linear infinite;} .eco-banner__track span{padding-right:4rem;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} /* =========================================================== 8. HEADER, NAV & MUSIC PLAYER =========================================================== */ .site-header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:var(--glass); border-bottom:1px solid var(--line); } .header-inner{ max-width:var(--container); margin:0 auto; padding:.9rem 24px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .brand{display:flex; align-items:center; gap:.6rem;} .brand-mark{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--orchard),var(--gold)); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.95rem; } .brand-name{font-family:var(--font-display); font-weight:600; font-size:1.05rem; display:flex; flex-direction:column; line-height:1.1;} .brand-name em{font-style:normal; font-family:var(--font-accent); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:500;} .main-nav{display:flex; gap:1.8rem; font-family:var(--font-accent); font-size:.88rem; font-weight:500;} .main-nav a{position:relative; padding:.3rem 0; color:var(--ink-soft);} .main-nav a:hover, .main-nav a.active{color:var(--orchard-light);} .main-nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--orchard-light); transition:right .3s var(--ease);} .main-nav a:hover::after, .main-nav a.active::after{right:0;} /* Navigation Breakpoint Logic */ @media (max-width: 768px) { .main-nav { display: none !important; } .nav-toggle { display: none !important; } .site-header { padding: 0.5rem 0; } .header-inner { padding: 0.6rem 1.2rem; } .header-actions .btn-sm { display: none; } /* Use bottom nav/icons for primary links */ } .header-actions{display:flex; align-items:center; gap:.7rem;} .icon-btn{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); transition:border-color .25s, transform .25s; position:relative;} .icon-btn:hover{border-color:var(--orchard-light);} .icon-btn .moon{display:none;} [data-theme="light"] .icon-btn .sun{display:none;} [data-theme="light"] .icon-btn .moon{display:block;} .nav-toggle{display:none; flex-direction:column; gap:5px; width:24px;} .nav-toggle span{height:2px; background:var(--ink); border-radius:2px; transition:.3s;} /* --- Music player --- */ .music-btn .icon-music-off{display:none;} .music-btn.playing .icon-music-on{display:none;} .music-btn.playing .icon-music-off{display:block;} .music-btn.playing{border-color:var(--orchard-light); color:var(--orchard-light);} .music-panel{ position:absolute; top:100%; right:24px; margin-top:.5rem; width:270px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.2rem; box-shadow:var(--shadow); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); z-index:60; } .music-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;} .music-panel-row{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.8rem; font-size:.82rem; font-family:var(--font-accent);} .music-play-btn{width:32px; height:32px; border-radius:50%; background:var(--orchard); color:#fff; display:grid; place-items:center; flex-shrink:0;} .music-panel input[type="range"]{width:100%; accent-color:var(--orchard);} .music-note{font-size:.74rem; color:var(--ink-mute); margin-top:.7rem; line-height:1.5;} /* =========================================================== 9. HERO =========================================================== */ .hero{position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; padding-top:4rem;} .hero-bg{position:absolute; inset:0; z-index:0;} .hero-video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.7; filter:brightness(0.6);} .hero-bg .ridge{position:absolute; bottom:0; width:100%; height:55%;} .ridge-back path{fill:var(--bg-soft);} .ridge-back{opacity:.55; animation:driftSlow 26s ease-in-out infinite alternate; will-change:transform;} .ridge-mid path{fill:var(--bg-elevated);} .ridge-mid{opacity:.75; animation:driftSlow 18s ease-in-out infinite alternate-reverse; will-change:transform;} .ridge-front path{fill:var(--pine);} .ridge-front{opacity:.9;} @keyframes driftSlow{from{transform:translateX(-2%);} to{transform:translateX(2%);}} .hero-glow{ position:absolute; top:-10%; right:-10%; width:60vw; height:60vw; border-radius:50%; background:radial-gradient(circle, rgba(181,69,43,.25), transparent 70%); filter:blur(40px); animation:glowPulse 8s ease-in-out infinite alternate; } @keyframes glowPulse{0%{transform:scale(1); opacity:.6;} 100%{transform:scale(1.2); opacity:1;}} .hero-content{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 24px; text-align:center;} .hero-content .eyebrow { opacity: 0; animation: heroTextReveal 1.2s var(--ease) forwards; animation-delay: 0.3s; color:#fcefd1; } .hero-content h1{ font-size:clamp(2.3rem,5.4vw,4rem); margin:.6rem 0 1.1rem; color:#fff; text-shadow:0 10px 40px rgba(0,0,0,.3); opacity: 0; animation: heroTextReveal 1.2s var(--ease) forwards; animation-delay: 0.5s; } .hero-sub{ color:rgba(255,255,255,.86); font-size:1.08rem; max-width:560px; margin:0 auto 2rem; opacity: 0; animation: heroTextReveal 1.2s var(--ease) forwards; animation-delay: 0.7s; } .hero-content .hero-cta { opacity: 0; animation: heroTextReveal 1.2s var(--ease) forwards; animation-delay: 0.9s; } .hero-content .trust-badges { opacity: 0; animation: heroTextReveal 1.2s var(--ease) forwards; animation-delay: 1.1s; } .hero-highlights{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; max-width:720px; margin:0 auto 1.6rem; } .hero-highlight-card{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:18px; padding:1rem .9rem; text-align:left; box-shadow:0 18px 40px -22px rgba(0,0,0,.45); transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .hero-highlight-card:hover{transform:translateY(-4px); background:rgba(255,255,255,.18); border-color:rgba(201,162,39,.45);} .hero-highlight-card strong{display:block; font-family:var(--font-accent); color:#fff; font-size:1rem; margin-bottom:.2rem;} .hero-highlight-card span{font-size:.76rem; color:rgba(255,255,255,.82);} @keyframes heroTextReveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .hero-cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.6rem;} @media (max-width: 520px) { .hero-cta { flex-direction: column; gap: 0.8rem; } .hero-cta .btn { width: 100%; } } .trust-badges{display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; font-family:var(--font-accent); font-size:.82rem; color:rgba(255,255,255,.86);} .section-soft{position:relative; background:linear-gradient(180deg, rgba(181,69,43,.05), transparent 70%);} .section-heading{max-width:720px; margin:0 auto 2.5rem; text-align:center;} .feature-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem;} .feature-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .feature-card::before{content:''; position:absolute; inset:auto auto 0 0; width:100%; height:4px; background:linear-gradient(90deg,var(--orchard),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);} .feature-card:hover{transform:translateY(-8px); border-color:var(--orchard-light); box-shadow:0 24px 50px -22px rgba(20,40,30,.32);} .feature-card:hover::before{transform:scaleX(1);} .feature-icon{width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,var(--orchard),var(--gold)); color:#fff; display:grid; place-items:center; margin-bottom:1rem; font-size:1.15rem;} .feature-card h3{font-size:1.2rem; margin-bottom:.5rem;} .feature-card p{color:var(--ink-soft); font-size:.95rem;} @media (max-width: 768px) { .hero-highlights{grid-template-columns:1fr 1fr;} .feature-grid{grid-template-columns:1fr;} } @media (max-width: 520px) { .hero-highlights{grid-template-columns:1fr;} .hero-cta{flex-direction:column; gap:.8rem;} .hero-cta .btn{width:100%;} } /* Quick-action pills shown in the contact page hero */ .hero-quick-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem;} .quick-pill{ font-family:var(--font-accent); font-size:.82rem; font-weight:600; padding:.65rem 1.3rem; border-radius:999px; background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--line); transition:.25s var(--ease); } .quick-pill:hover{border-color:var(--orchard-light); color:var(--orchard-light); transform:translateY(-2px);} .scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;} .scroll-cue span{display:block; width:24px; height:38px; border:2px solid var(--ink-mute); border-radius:14px; position:relative;} .scroll-cue span::before{content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--orchard-light); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.6s ease infinite;} @keyframes scrollDot{0%{opacity:1; top:6px;} 80%{opacity:0; top:20px;} 100%{opacity:0; top:6px;}} /* Smaller hero used on inner pages (packages / about / contact) */ .page-hero{min-height:46vh; padding-top:6rem; padding-bottom:2rem;} .page-hero .hero-content h1{font-size:clamp(2rem,4.4vw,3.2rem);} /* =========================================================== 10. ORCHARD DIVIDER (signature element) =========================================================== */ .orchard-divider{line-height:0; color:var(--orchard); opacity:.5;} .orchard-divider svg{width:100%; height:40px; display:block;} .orchard-divider path{fill:none; stroke:currentColor; stroke-width:1.4;} .orchard-divider.flip{transform:scaleY(-1);} /* =========================================================== 11. SCROLL-REVEAL ANIMATIONS =========================================================== */ .reveal{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity, transform;} .reveal-left{opacity:0; transform:translateX(-40px); transition:opacity .8s var(--ease), transform .8s var(--ease);} .reveal-right{opacity:0; transform:translateX(40px); transition:opacity .8s var(--ease), transform .8s var(--ease);} .reveal.in, .reveal-left.in, .reveal-right.in{opacity:1; transform:translate(0,0);} .reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;} .reveal-delay-3{transition-delay:.3s;} /* =========================================================== 12. ABOUT / STORY SECTION =========================================================== */ .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; align-items:center;} .about-media{position:relative; min-height:420px;} .media-card{position:absolute; border-radius:var(--radius-lg); box-shadow:var(--shadow); background-size:cover; background-position:center;} .media-card--1{width:78%; height:340px; top:0; left:0; background:linear-gradient(135deg,#3C6B4A,#1F4032);} .media-card--2{width:60%; height:240px; bottom:0; right:0; background:linear-gradient(135deg,var(--orchard),#7A2E1D); border:6px solid var(--bg);} .stat-chip{ position:absolute; left:10%; bottom:-10%; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:1rem 1.2rem; box-shadow:var(--shadow); max-width:220px; } .stat-chip strong{font-family:var(--font-display); font-size:1.6rem; display:block; color:var(--orchard-light);} .stat-chip span{font-size:.78rem; color:var(--ink-mute);} .about-copy h2{margin-bottom:1rem;} .about-copy p{color:var(--ink-soft); margin-bottom:1.2rem; font-size: 1.05rem;} .tag-grid{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0;} .tag-grid li{font-family:var(--font-accent); font-size:.78rem; padding:.4rem .9rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);} .badge-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem;} .badge-row span{font-family:var(--font-accent); font-size:.8rem; font-weight:600; background:var(--bg-soft); padding:.6rem 1rem; border-radius:var(--radius-sm);} @media (max-width:880px){ .about-grid{grid-template-columns:1fr; gap:3.5rem;} .about-media{min-height:320px;} } /* =========================================================== 13. REUSABLE "WHY" CARD GRID Used by: Why Maraog, Hidden Gems (about.html), Why Choose Us cards, Travel Info (contact.html) =========================================================== */ .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.6rem;} .why-card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.8rem; transition:transform .35s var(--ease), box-shadow .35s var(--ease);} .why-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);} .why-card span{font-size:1.7rem; display:inline-block; transition:transform .5s var(--ease);} .why-card:hover span{transform:scale(1.2) rotate(10deg);} .why-card h3{margin:.7rem 0 .4rem; font-size:1.1rem;} .why-card p{color:var(--ink-soft); font-size:.92rem;} @media (max-width:780px){.why-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.why-grid{grid-template-columns:1fr;}} /* =========================================================== 14. COUNTERS =========================================================== */ .counters{padding:3.2rem 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .counters-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; text-align:center;} .count{font-family:var(--font-display); font-size:2.6rem; color:var(--orchard-light); font-weight:700;} .counter p{font-family:var(--font-accent); font-size:.8rem; color:var(--ink-mute); margin-top:.3rem;} @media (max-width:680px){.counters-grid{grid-template-columns:1fr 1fr;}} /* =========================================================== 15. TOUR PACKAGES =========================================================== */ .filter-bar{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.6rem;} .filter-btn{font-family:var(--font-accent); font-size:.82rem; font-weight:600; padding:.6rem 1.2rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); transition:.25s;} .filter-btn:active{transform: scale(0.96);} .filter-btn:hover{border-color:var(--orchard-light);} .filter-btn.active{background:var(--orchard); color:#fff; border-color:var(--orchard);} .packages-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;} @media (max-width:980px){.packages-grid{grid-template-columns:1fr 1fr;}} @media (max-width:768px){.packages-grid{gap:1.4rem;}} @media (max-width:640px){.packages-grid{grid-template-columns:1fr; padding: 0 4px;}} .package-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .package-card:hover{transform:translateY(-8px); box-shadow:var(--shadow);} /* soft diagonal shine sweeping across the card on hover */ .package-card::before{ content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(to right, transparent, rgba(255,255,255,.05), transparent); transform:skewX(-25deg); transition:.75s; z-index:2; pointer-events:none; } .package-card:hover::before{left:150%;} .package-img{height:170px; background-size:cover; background-position:center; position:relative;} .package-img::after{content:attr(data-duration); position:absolute; bottom:.7rem; left:.7rem; background:rgba(14,31,25,.75); color:#fff; font-family:var(--font-accent); font-size:.7rem; font-weight:600; padding:.3rem .7rem; border-radius:999px;} .package-body{padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1;} .package-body h3{font-size:1.08rem;} .package-dest{font-size:.82rem; color:var(--ink-mute);} .package-price{font-family:var(--font-display); font-size:1.4rem; color:var(--orchard-light); margin-top:.2rem;} .package-price span{font-family:var(--font-accent); font-size:.72rem; color:var(--ink-mute); font-weight:500;} .package-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.8rem;} /* expandable "View Details" panel (packages.html) */ .package-details{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);} .package-details.open{max-height:240px;} .package-details-inner{padding:0 1.4rem 1.2rem; border-top:1px solid var(--line); margin-top:.2rem; padding-top:1rem;} .package-details ul{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem;} .package-details li{font-family:var(--font-accent); font-size:.74rem; padding:.35rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);} .package-details .label{font-family:var(--font-accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute);} /* --- Timer & Travel Graphics --- */ .timer-banner { background: linear-gradient(135deg, var(--orchard), var(--gold)); color: #fff; padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; box-shadow: var(--shadow); animation: slideDown 0.6s var(--ease); } .timer-info h4 { font-family: var(--font-accent); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.9; } .timer-info p { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; } .countdown-display { display: flex; gap: 1rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; } .countdown-display span { background: rgba(0,0,0,0.2); padding: 0.4rem 0.8rem; border-radius: 8px; min-width: 60px; text-align: center; } .package-dna { display: flex; justify-content: space-around; background: var(--bg-soft); padding: 0.8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .dna-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.65rem; font-family: var(--font-accent); font-weight: 600; color: var(--ink-mute); transition: transform 0.3s var(--ease); } .dna-item svg { width: 18px; height: 18px; color: var(--orchard-light); transition: 0.3s; } .package-card:hover .dna-item { transform: translateY(-2px); } .package-card:hover .dna-item svg { transform: scale(1.2); color: var(--gold); } .dna-active { color: var(--ink); } .dna-active svg { color: var(--orchard); } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .timer-banner { flex-direction: column; text-align: center; gap: 1rem; padding: 1.2rem; } .countdown-display { font-size: 1.5rem; } } /* =========================================================== 16. QUICK-CONTACT CARDS (contact.html) =========================================================== */ .quick-contact-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;} .quick-contact-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.4rem; display:flex; align-items:center; gap:1.2rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .quick-contact-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--orchard-light);} .quick-contact-icon{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(135deg,var(--orchard),var(--gold)); color:#fff; } .quick-contact-card strong{display:block; font-family:var(--font-display); font-size:1rem; margin-bottom:.15rem;} .quick-contact-card > span > span{font-size:.8rem; color:var(--ink-mute); word-break:break-word;} @media (max-width:880px){.quick-contact-row{grid-template-columns:1fr;}} /* =========================================================== 17. ACTIVITIES ROW =========================================================== */ .activity-row{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem;} .activity-row span{font-family:var(--font-accent); font-size:.85rem; font-weight:500; padding:.7rem 1.3rem; border-radius:999px; border:1px solid var(--line); transition:.25s;} .activity-row span:hover{background:var(--orchard); border-color:var(--orchard); color:#fff;} /* =========================================================== 18. WHY-CHOOSE-US GRID =========================================================== */ .why-us-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; font-family:var(--font-accent); font-weight:500; font-size:.92rem;} .why-us-grid div{background:var(--bg-elevated); border:1px solid var(--line); padding:1.1rem 1.3rem; border-radius:var(--radius-sm);} @media (max-width:780px){.why-us-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.why-us-grid{grid-template-columns:1fr;}} /* =========================================================== 19. GALLERY MASONRY =========================================================== */ .masonry{column-count:4; column-gap:1rem; margin-top:2rem;} .masonry img,.masonry .ph{width:100%; border-radius:var(--radius-md); margin-bottom:1rem; display:block; break-inside:avoid;} .ph{display:flex; align-items:flex-end; padding:.8rem; font-family:var(--font-accent); font-size:.78rem; font-weight:600; color:#fff; opacity:.92;} @media (max-width:980px){.masonry{column-count:2;}} @media (max-width:520px){.masonry{column-count:1;}} /* =========================================================== 20. TESTIMONIALS =========================================================== */ .testimonial-track{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.4rem;} .t-card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.6rem;} .t-card .stars{color:var(--gold); margin-bottom:.6rem; letter-spacing:.1em;} .t-card p{color:var(--ink-soft); font-size:.92rem; margin-bottom:1rem;} .t-card strong{font-family:var(--font-accent); font-size:.85rem;} .t-card em{font-style:normal; display:block; font-size:.75rem; color:var(--ink-mute);} @media (max-width:880px){.testimonial-track{grid-template-columns:1fr;}} /* =========================================================== 21. MISSION STRIP (Clean Himachal, Green Himachal) =========================================================== */ .mission{background:linear-gradient(135deg,#1B3A2C,#0E1F19); color:#F4F1E8;} [data-theme="light"] .mission{background:linear-gradient(135deg,#21442F,#13281F); color:#F4F1E8;} .mission-inner{max-width:680px; text-align:center; margin:0 auto;} .mission-inner h2{margin:.6rem 0 1.1rem;} .mission-inner p{color:#D7E0D2;} /* =========================================================== 22. CONTACT CTA STRIP =========================================================== */ .contact-cta-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.4rem; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.4rem;} .contact-cta-inner h2{margin:.4rem 0;} @media (max-width: 768px) { .contact-cta-inner { padding: 1.8rem; text-align: center; justify-content: center; } .contact-cta-inner .btn { width: 100%; } } /* =========================================================== 23. CONTACT PAGE (office panel, branch cards, map, form) =========================================================== */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;} @media (max-width:880px){.contact-grid{grid-template-columns:1fr; gap:2.5rem;}} .office-panel{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem;} .info-row{display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.2rem;} .info-icon{width:38px; height:38px; border-radius:50%; background:var(--bg-soft); color:var(--orchard-light); display:grid; place-items:center; flex-shrink:0;} .info-row strong{display:block; font-size:.88rem; margin-bottom:.15rem;} .info-row span,.info-row a{font-size:.86rem; color:var(--ink-soft);} .info-row a{color:var(--orchard-light); font-weight:600;} .branch-cards{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.8rem 0 1.8rem;} .branch-card{ display:flex; align-items:center; gap:.5rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .9rem; font-family:var(--font-accent); font-size:.82rem; font-weight:600; } .branch-card .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-mute); flex-shrink:0;} .branch-card.hq{border-color:var(--orchard-light);} .branch-card.hq .dot{background:var(--orchard-light);} .branch-card .tag{margin-left:auto; font-size:.62rem; color:var(--ink-mute); font-weight:500; text-transform:uppercase; letter-spacing:.04em;} @media (max-width:480px){.branch-cards{grid-template-columns:1fr;}} .map-card{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); margin-top:.4rem;} .map-card iframe{width:100%; height:230px; border:0; filter:grayscale(.25); display:block;} .map-caption{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:.9rem 1.1rem; background:var(--bg-soft); font-size:.8rem; font-family:var(--font-accent);} .contact-form{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem;} .contact-form h3{margin-bottom:1.2rem;} .contact-form label{display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; font-family:var(--font-accent); color:var(--ink-mute); margin-bottom:1.1rem;} .form-label-row{display:flex; align-items:center; gap:.45rem;} .contact-form input,.contact-form select,.contact-form textarea{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.85rem 1rem; color:var(--ink); width:100%; transition:border-color .25s;} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--orchard-light);} .contact-form textarea{resize:vertical; min-height:100px;} .form-note{font-size:.78rem; color:var(--ink-mute); margin-top:.8rem;} .form-success{color:var(--orchard-light); font-weight:600; font-size:.86rem; margin-top:.6rem;} /* Loading Spinner for Submit Button */ .loading-spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* =========================================================== 24. FOOTER =========================================================== */ .site-footer{background:var(--bg-soft); border-top:1px solid var(--line); padding:4.5rem 0 2rem;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:2.5rem;} .footer-grid h4{font-size:.85rem; margin-bottom:1rem; font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.06em;} .footer-grid a,.footer-grid span{display:block; font-size:.88rem; color:var(--ink-soft); margin-bottom:.6rem;} .footer-grid p{color:var(--ink-mute); font-size:.85rem; margin:.8rem 0;} .social-row{display:flex; gap:.6rem; margin-top:1rem;} .social-row a{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:.7rem; font-weight:700;} .footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-mute);} @media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}} /* =========================================================== 25. FLOATING ACTION BUTTONS =========================================================== */ .float-btn{ position:fixed; right:22px; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow); z-index:40; transition:transform .3s var(--ease); } .float-btn:hover{transform:scale(1.08);} .float-whatsapp{bottom:96px; background:#25D366; color:#fff;} .float-call{bottom:166px; background:var(--orchard); color:#fff;} .float-top{bottom:26px; background:var(--bg-elevated); color:var(--ink); border:1px solid var(--line); opacity:0; pointer-events:none;} .float-top.show{opacity:1; pointer-events:auto;} @media (max-width:768px){ .float-whatsapp{bottom:84px; right:16px;} .float-call{bottom:144px; right:16px;} .float-top { display: none; } } /* =========================================================== 26. LEAD POPUP MODAL =========================================================== */ .modal-overlay{ position:fixed; inset:0; background:rgba(8,16,12,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:80; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); padding:1.2rem; } .modal-overlay.show{opacity:1; pointer-events:auto;} .modal{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem; max-width:420px; width:100%; position:relative; transform:translateY(20px) scale(.96); transition:transform .4s var(--ease); box-shadow:var(--shadow);} .modal-overlay.show .modal{transform:translateY(0) scale(1);} .modal-close{position:absolute; top:14px; right:14px; font-size:1.4rem; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;} .modal-close:hover{background:var(--bg-soft);} .lead-modal h3{margin:.4rem 0 .6rem;} .lead-modal p{font-size:.86rem; color:var(--ink-soft); margin-bottom:1.2rem;} .lead-modal label{display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; font-family:var(--font-accent); color:var(--ink-mute); margin-bottom:.9rem;} .lead-modal input,.lead-modal select{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .9rem; color:var(--ink); width:100%;} .lead-modal .btn{width:100%; justify-content:center; margin-top:.4rem;} /* =========================================================== 27. MOBILE BOTTOM NAV =========================================================== */ .bottom-nav{display:none;} @media (max-width: 768px) { .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-elevated); border-top: 1px solid var(--line); z-index: 100; justify-content: space-around; padding: 0.75rem 0; backdrop-filter: blur(15px); box-shadow: 0 -4px 20px rgba(0,0,0,0.1); } .bottom-nav a { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; color: var(--ink-mute); font-family: var(--font-accent); padding: 0 10px; } .bottom-nav a.active { color: var(--orchard-light); } .bottom-nav svg { margin-bottom: 4px; width: 22px; height: 22px; } body { padding-bottom: 70px; } .hero { min-height: 60vh; padding-top: 2rem; } .hero-content h1 { font-size: 2rem; line-height: 1.2; } .hero-sub { font-size: 0.95rem; } } /* =========================================================== 30. VIDEO GALLERIES =========================================================== */ .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 2.6rem; } .video-card { display: flex; flex-direction: column; } .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-soft); } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-card h3 { margin-top: 1.2rem; font-size: 1.05rem; color: var(--ink); text-align: center; } @media (max-width: 980px) { .video-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } } /* =========================================================== 31. INSTAGRAM HIGHLIGHTS =========================================================== */ .instagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.6rem; } .instagram-card { background: var(--bg-elevated); border-radius: 24px; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .instagram-card:hover { transform: translateY(-6px); border-color: var(--orchard-light); box-shadow: 0 24px 50px -24px rgba(20,40,30,.35); } .instagram-card__media { position: relative; aspect-ratio: 9 / 16; background: #000; } .instagram-card__media iframe { width: 100% !important; height: 100% !important; border: 0; } .instagram-card__body { padding: 1rem 1rem 1.2rem; } .instagram-card__body h3 { font-size: 1.05rem; margin-bottom: 0.35rem; } .instagram-card__body p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; } @media (max-width: 980px) { .instagram-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .instagram-grid { grid-template-columns: 1fr; } }