/* ======================================== RAJASTHAN TRAVEL ITINERARY WEBSITE Modern, Responsive, Luxury Design System ======================================== */ /* Google Fonts moved to tags in HTML for faster loading */ /* ======================================== 1. DESIGN TOKENS & VARIABLES ======================================== */ :root { /* Primary Colors - Rajasthani Heritage Palette */ --color-primary: #b5451b; /* Burnt sienna — CTAs, accents */ --color-primary-hover: #cf5623; /* Lighter sienna — hover states */ --color-dark: #1a120b; /* Haveli charcoal — text, navbar */ --color-light: #faf3ea; /* Jaisalmer sandstone — backgrounds */ --color-cream: #fff8ef; /* Warm cream — card backgrounds */ --color-surface: #fef9f2; /* Elevated surfaces */ --color-surface-alt: #f0e4d3; /* Alternate surface — warm sand */ /* Secondary Colors - Rajasthani Earth & Jewel Tones */ --color-rust: #a07840; /* Desert gold — borders, accents */ --color-brown: #5c3d1e; /* Haveli wood — deep accents */ --color-slate: #2b1e14; /* Deep mahogany — headings */ --color-earth: #7d6a55; /* Earth tone — secondary text */ --color-gold: #c8982e; /* Rajput gold — premium accents */ --color-indigo: #1d3461; /* Jodhpur blue — headings, contrast */ --color-maroon: #6b1624; /* Bandhani maroon — deep accent */ /* Semantic Colors */ --color-success: #2a7d4f; /* Mewar green */ --color-warning: #d48b2c; /* Amber attention */ --color-link: #1d3461; /* Jodhpur indigo links */ --color-text: #2b1e14; /* Primary text — deep mahogany */ --color-text-light: #6b5c4e; /* Secondary text */ --color-border: #dfd0be; /* Sandstone border */ --color-white: #ffffff; /* White spaces */ /* Typography */ --font-sans: 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; /* Font Sizes - Mobile first, scales up */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 48px; --text-5xl: 56px; /* Font Weights */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.6; --line-height-loose: 1.8; /* Spacing Scale (8px base) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; --spacing-3xl: 40px; --spacing-4xl: 56px; --spacing-5xl: 64px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 3px 8px rgba(38, 26, 16, 0.08); --shadow-md: 0 10px 24px rgba(38, 26, 16, 0.12); --shadow-lg: 0 18px 38px rgba(38, 26, 16, 0.16); --shadow-xl: 0 28px 60px rgba(38, 26, 16, 0.2); /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; /* Container */ --container-max: 1200px; --container-padding: 24px; } /* ======================================== 2. GLOBAL STYLES & RESET ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--line-height-relaxed); color: var(--color-text); background-color: var(--color-light); background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8982e' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), radial-gradient(1000px circle at 10% -10%, rgba(255, 255, 255, 0.8), transparent 60%), radial-gradient(900px circle at 100% 20%, rgba(200, 152, 46, 0.08), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); /* background-attachment: fixed removed — destroys mobile scroll performance */ } img { max-width: 100%; display: block; } svg.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; } svg.icon-sm { width: 0.95em; height: 0.95em; } svg.icon-lg { width: 1.6em; height: 1.6em; } svg.icon-xl { width: 2.2em; height: 2.2em; } .icon-inline { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; color: var(--color-primary); } /* ======================================== 3. TYPOGRAPHY ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: var(--weight-bold); line-height: var(--line-height-tight); color: var(--color-indigo); margin-bottom: var(--spacing-md); } h1 { font-size: var(--text-4xl); margin-bottom: var(--spacing-xl); } h2 { font-size: var(--text-3xl); margin-bottom: var(--spacing-xl); } h3 { font-size: var(--text-xl); margin-bottom: var(--spacing-lg); } h4 { font-size: var(--text-lg); margin-bottom: var(--spacing-md); } p { margin-bottom: var(--spacing-lg); color: var(--color-text); } a { color: var(--color-indigo); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } a:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Mobile-friendly form elements */ input, textarea, select, button { font-size: 16px; } input, textarea, select { min-height: 44px; padding: var(--spacing-md); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-sans); width: 100%; transition: all var(--transition-base); background: var(--color-white); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.1); } input::placeholder, textarea::placeholder { color: var(--color-text-light); } /* Better mobile-friendly text sizing for form inputs */ @media (max-width: 900px) { input, textarea, select, button { font-size: 16px !important; } } /* ======================================== 4. LAYOUT COMPONENTS ======================================== */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } main { min-height: 100vh; } /* ======================================== 5. NAVIGATION & HAMBURGER MENU ======================================== */ .navbar { background: #000; padding: 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); height: 70px; overflow: visible; border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); display: flex; justify-content: space-between; align-items: center; height: 70px; overflow: visible; gap: 16px; } .logo { display: flex; align-items: center; text-decoration: none; overflow: visible; flex-shrink: 0; line-height: 0; } .logo-img { width: clamp(180px, 17vw, 220px); height: auto; max-height: 60px; background-color: transparent; display: block; object-fit: contain; } .nav-links { display: flex; gap: 8px; align-items: center; } .nav-link { color: rgba(255, 255, 255, 0.84); font-size: 14px; font-weight: var(--weight-semibold); padding: 8px 12px; border-radius: 10px; transition: background-color var(--transition-base), color var(--transition-base); position: relative; border: 1px solid transparent; letter-spacing: 0.15px; opacity: 1; } .packpilot-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: rgba(255, 255, 255, 0.9); background: transparent; border: 0; transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base); } .packpilot-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .packpilot-icon-btn:hover, .packpilot-icon-btn.active { background: rgba(255, 255, 255, 0.14); color: #ffffff; } /* ======================================== DESTINATIONS HERO SLIDER ======================================== */ .dest-slider { position: relative; width: 100%; height: 65vh; min-height: 380px; max-height: 620px; overflow: hidden; } /* --- slide layers --- */ .dest-slider__slides { position: absolute; inset: 0; } .dest-slider__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 6s ease; /* will-change removed — saves GPU memory on mobile */ } .dest-slider__slide.active { opacity: 1; transform: scale(1); z-index: 1; } /* dark overlay for text contrast */ .dest-slider__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(15, 26, 46, 0.25) 0%, rgba(26, 18, 11, 0.55) 70%, rgba(15, 26, 46, 0.78) 100% ); pointer-events: none; } /* --- text content --- */ .dest-slider__content { position: absolute; z-index: 3; bottom: 120px; left: 0; right: 0; text-align: center; padding: 0 var(--container-padding); opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .dest-slider__content.visible { opacity: 1; transform: translateY(0); } .dest-slider__label { display: inline-block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 2.5px; color: #fff; background: rgba(29, 52, 97, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6px 18px; border-radius: var(--radius-full); margin-bottom: var(--spacing-lg); border: 1px solid rgba(200, 152, 46, 0.25); } .dest-slider__title { font-family: var(--font-serif); font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: var(--weight-bold); color: #fff; line-height: var(--line-height-tight); margin-bottom: var(--spacing-md); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); } .dest-slider__desc { max-width: 560px; margin: 0 auto; font-family: var(--font-sans); font-size: var(--text-lg); color: rgba(255, 255, 255, 0.88); line-height: var(--line-height-relaxed); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } /* --- navigation dots --- */ .dest-slider__dots { position: absolute; z-index: 4; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .dest-slider__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); background: transparent; cursor: pointer; padding: 0; transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); } .dest-slider__dot:hover { border-color: #fff; transform: scale(1.2); } .dest-slider__dot.active { background: var(--color-gold); border-color: #fff; transform: scale(1.15); } /* --- arrow buttons --- */ .dest-slider__arrow { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 255, 255, 0.18); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform 180ms cubic-bezier(.22,1,.36,1); } .dest-slider__arrow:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.18); } .dest-slider__arrow:active { transform: translateY(-50%) scale(.95); box-shadow: 0 1px 6px rgba(0,0,0,.12); } .dest-slider__arrow:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; } .dest-slider__arrow--prev { left: 24px; } .dest-slider__arrow--next { right: 24px; } /* --- responsive --- */ @media (max-width: 768px) { .dest-slider { height: 75vh; min-height: 420px; } .dest-slider__content { bottom: 100px; } .dest-slider__desc { font-size: var(--text-base); } .dest-slider__arrow { width: 40px; height: 40px; } .dest-slider__arrow--prev { left: 12px; } .dest-slider__arrow--next { right: 12px; } } @media (max-width: 480px) { .dest-slider { height: 65vh; min-height: 360px; } .dest-slider__content { bottom: 80px; } .dest-slider__title { font-size: clamp(1.8rem, 8vw, 2.4rem); } .dest-slider__desc { font-size: var(--text-sm); } .dest-slider__arrow { width: 36px; height: 36px; top: auto; bottom: 38px; transform: none; } .dest-slider__arrow:hover { transform: scale(1.08); } .dest-slider__arrow--prev { left: 16px; } .dest-slider__arrow--next { right: 16px; } @media (max-width: 600px) { .dest-slider__dots { bottom: 18px; gap: 5px; } .dest-slider__dot { width: 7px; height: 7px; min-width: 7px; min-height: 7px; max-width: 7px; max-height: 7px; } } } /* ======================================== PROMO AD SECTION ======================================== */ .promo-section { padding: var(--spacing-5xl) 0; background: linear-gradient(180deg, var(--color-light) 0%, var(--color-surface-alt) 100%); } .promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-2xl); } .promo-card { position: relative; padding: var(--spacing-3xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); overflow: hidden; } .promo-primary { background: linear-gradient(135deg, rgba(181, 69, 27, 0.08) 0%, rgba(200, 152, 46, 0.06) 100%); border-top: 3px solid var(--color-gold); } .promo-secondary { background: linear-gradient(135deg, rgba(29, 52, 97, 0.06) 0%, rgba(29, 52, 97, 0.03) 100%); border-top: 3px solid var(--color-indigo); } .promo-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.6px; background: linear-gradient(135deg, var(--color-indigo), #2a4a7f); color: #fff; margin-bottom: var(--spacing-md); border: 1px solid rgba(200, 152, 46, 0.3); } .promo-card h2 { margin-bottom: var(--spacing-sm); } .promo-card p { color: var(--color-text-light); margin-bottom: var(--spacing-lg); } .promo-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: center; } .promo-price { font-weight: var(--weight-semibold); color: var(--color-primary); } .promo-note { font-weight: var(--weight-medium); color: var(--color-text-light); } .nav-link:hover, .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); } /* ======================================== HAMBURGER MENU STYLES ======================================== */ .hamburger-btn { display: none; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.95); font-size: 0; line-height: 1; cursor: pointer; padding: 8px; min-height: 48px; min-width: 48px; align-items: center; justify-content: center; position: relative; z-index: 1001; transition: background-color var(--transition-base), border-color var(--transition-base); border-radius: 12px; } .hamburger-lines { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 999px; transition: background-color 0.22s ease, transform 0.22s ease; } .hamburger-lines::before, .hamburger-lines::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 999px; transition: transform 0.22s ease; } .hamburger-lines::before { top: -6px; } .hamburger-lines::after { top: 6px; } .hamburger-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); } .hamburger-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* hamburger icon animation */ .hamburger-btn.active { color: #fff; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); } .hamburger-btn.active .hamburger-lines { background: transparent; } .hamburger-btn.active .hamburger-lines::before { transform: translateY(6px) rotate(45deg); } .hamburger-btn.active .hamburger-lines::after { transform: translateY(-6px) rotate(-45deg); } /* Mobile menu backdrop overlay */ .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5, 7, 10, 0.58); z-index: 999; animation: fadeIn 0.24s ease-out; backdrop-filter: blur(8px); } .mobile-menu-overlay.active { display: block; } .navbar.navbar-scrolled { height: 62px; } .navbar.navbar-scrolled .navbar-container { height: 62px; } .navbar.navbar-scrolled .logo-img { width: clamp(172px, 16vw, 204px); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Mobile menu container */ .mobile-menu { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; left: auto; width: min(88vw, 360px); height: 100vh; background: #fff; border-left: 1px solid rgba(15, 23, 42, 0.12); max-height: none; overflow-y: auto; z-index: 1000; box-shadow: -20px 0 40px rgba(15, 23, 42, 0.12); transform: translateX(100%); transition: transform 0.24s ease-out; pointer-events: none; } .mobile-menu.active { transform: translateX(0); pointer-events: auto; } .mobile-menu-links { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 8px 12px 24px; } .mobile-menu-links li { border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .mobile-menu-links li:last-child { border-bottom: none; } .menu-section-label { list-style: none; padding: 12px 6px 8px; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: 0; } .mobile-menu-links li.menu-section-label { border-bottom: 0; } .mobile-menu-links a { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px 14px; min-height: 52px; color: #0f172a; font-size: 15px; font-weight: var(--weight-medium); transition: background-color var(--transition-base), color var(--transition-base); position: relative; border-radius: 10px; } .menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(15, 23, 42, 0.12); background: #f8fafc; color: #0f172a; flex-shrink: 0; } .menu-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .menu-text { flex: 1; } .mobile-menu-links a::after { content: ''; width: 7px; height: 7px; border-top: 1.8px solid #94a3b8; border-right: 1.8px solid #94a3b8; transform: rotate(45deg); margin-left: auto; } .mobile-menu-links a:hover { background: #f8fafc; color: #020617; text-decoration: none; } .mobile-menu-links a.active { background: #f1f5f9; color: #020617; border-left: 2px solid #0f172a; } .mobile-menu-links a.active .menu-icon { color: #020617; border-color: rgba(15, 23, 42, 0.16); background: #fff; } .mobile-menu-links a.active::after { border-top-color: #0f172a; border-right-color: #0f172a; } .mobile-drawer-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(15, 23, 42, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .drawer-brand { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; margin: 0; order: 1; } .drawer-brand img, .drawer-brand-logo { width: 122px; max-width: 122px; max-height: 34px; height: auto; object-fit: contain; display: block; } .drawer-brand-name { display: inline-flex; align-items: center; font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: #0f172a; text-shadow: 0 0 10px rgba(15, 23, 42, 0.12); } .drawer-close { width: 42px; height: 42px; margin: 0; order: 2; border-radius: 12px; border: 1px solid rgba(15, 23, 42, 0.14); background: #f8fafc; color: #0f172a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .drawer-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } @media (max-width: 420px) { .drawer-brand { gap: 6px; } .drawer-brand-name { font-size: 10px; letter-spacing: 0.08em; } } .mobile-drawer-footer { position: sticky; bottom: 0; background: rgba(255, 255, 255, 0.98); border-top: 1px solid rgba(15, 23, 42, 0.1); padding: 12px; display: grid; gap: 10px; } .drawer-cta { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 72px; border-radius: 16px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); color: #0f172a; font-weight: 600; text-decoration: none; padding: 14px; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .drawer-cta svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .drawer-cta .cta-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #0f172a; color: #fff; grid-row: 1 / span 2; } .drawer-cta .cta-text { font-size: 15px; font-weight: 700; color: #0f172a; } .drawer-cta .cta-sub { font-size: 12px; color: #64748b; margin: 0; text-align: left; } .drawer-cta:hover { border-color: rgba(15, 23, 42, 0.2); box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12); transform: translateY(-1px); } .drawer-footer-label { color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .drawer-secondary-links { display: flex; gap: 10px; flex-wrap: wrap; } .drawer-secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); background: #f8fafc; color: #0f172a; text-decoration: none; font-size: 13px; font-weight: 600; } .drawer-pills { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .drawer-lang-wrap .mobile-lang-options { gap: 8px; } .drawer-pill { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.14); background: #fff; color: #0f172a; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .drawer-theme-pill { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 999px; justify-content: center; gap: 0; } .drawer-pill-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .drawer-pill-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Prevent body scroll when menu is open */ body.menu-open { overflow: hidden; } /* ======================================== 6. HERO SECTION ======================================== */ /* Hero badge - glassmorphism pill */ .hero-badge { display: inline-block; padding: 8px 20px; margin-bottom: var(--spacing-xl); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.5px; text-transform: uppercase; animation: fadeUp 0.6s ease both; } /* Gradient accent text in hero */ .hero-accent { background: linear-gradient(135deg, var(--color-gold) 0%, #f5d78e 50%, var(--color-gold) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } } /* Hero dual-button row */ .hero-actions { display: flex; gap: var(--spacing-lg); justify-content: center; flex-wrap: wrap; animation: fadeUp 1s ease both; animation-delay: 0.3s; } /* Ghost / outline button */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-full); font-size: var(--text-base); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; min-height: 46px; color: var(--color-white); background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform 180ms cubic-bezier(.22,1,.36,1); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); } .btn-ghost:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 8px rgba(0,0,0,.12); } .btn-ghost:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 3px; } /* Glow-pulse button — subtle, refined pulse */ .btn-glow { box-shadow: 0 0 16px rgba(181, 69, 27, 0.28), 0 0 48px rgba(181, 69, 27, 0.08); animation: btnPulse 3s ease-in-out infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 0 16px rgba(181,69,27,.28), 0 0 48px rgba(181,69,27,.08); } 50% { box-shadow: 0 0 24px rgba(181,69,27,.40), 0 0 64px rgba(181,69,27,.14); } } /* Section label — thin uppercase pill above section headings */ .section-label { display: inline-block; padding: 4px 16px; margin-bottom: var(--spacing-md); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 1.8px; color: #fff; background: rgba(200, 152, 46, 0.1); border: 1px solid rgba(200, 152, 46, 0.2); } .section-label--light { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } /* â”€â”€ Scroll Reveal â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .reveal-section { opacity: 1; transform: translateY(0); content-visibility: auto; contain-intrinsic-size: 1px 900px; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-section.revealed { opacity: 1; transform: translateY(0); } .reveal-section .feature-card, .reveal-section .promo-card, .reveal-section .faq-item, .reveal-section .intl-card { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-section .feature-card.revealed, .reveal-section .promo-card.revealed, .reveal-section .faq-item.revealed, .reveal-section .intl-card.revealed { opacity: 1; transform: translateY(0); } /* â”€â”€ FAQ Accordion (modern) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .faq-accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-md); } .faq-accordion .faq-item { background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--transition-base); border-left: none; } .faq-accordion .faq-item[open] { box-shadow: var(--shadow-md); border-color: rgba(200, 152, 46, 0.35); } .faq-question { padding: var(--spacing-xl) var(--spacing-2xl); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-indigo); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); transition: color var(--transition-fast); user-select: none; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: ''; font-size: 22px; font-weight: var(--weight-normal); color: #fff; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.09); transition: transform var(--transition-base), background var(--transition-base); } .faq-item[open] .faq-question::after { content: ''; transform: rotate(180deg); background: rgba(200, 152, 46, 0.15); } .faq-question:hover { color: var(--color-primary); } .faq-answer { padding: 0 var(--spacing-2xl) var(--spacing-xl); animation: faqSlide 0.3s ease; } .faq-answer p { color: var(--color-text-light); font-size: var(--text-sm); line-height: var(--line-height-relaxed); margin-bottom: 0; } @keyframes faqSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .hero { background: linear-gradient(135deg, #2b1e14 0%, #1d3461 100%); padding: var(--spacing-5xl) var(--container-padding); text-align: center; position: relative; overflow: hidden; border-bottom: 3px solid var(--color-gold); } .hero.hero-photo { min-height: 480px; max-height: 85vh; display: flex; align-items: center; justify-content: center; color: var(--color-white); background-color: #1f1a16; background-image: var(--hero-fallback-image, none); background-size: cover; background-position: center; } .hero.hero-photo::before, .hero.hero-photo::after { content: none; } .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity 0.9s ease, transform 2s ease; } .hero-slide.active { opacity: 1; transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 46, 0.35) 0%, rgba(26, 18, 11, 0.78) 80%); z-index: 1; } .hero::before { content: ''; position: absolute; inset: -20% 0 auto 0; height: 280px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; right: -12%; bottom: -30%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(196, 148, 96, 0.2), transparent 70%); pointer-events: none; } .hero-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; animation: fadeUp 0.8s ease both; } .hero h1 { color: var(--color-white); margin-bottom: var(--spacing-lg); font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); line-height: 1.15; letter-spacing: -0.5px; } .hero.hero-photo h1, .hero.hero-photo .hero-subtitle { color: var(--color-white); } .hero-subtitle { font-size: var(--text-lg); color: #fff; margin-bottom: var(--spacing-2xl); letter-spacing: 1.5px; text-transform: uppercase; font-weight: var(--weight-medium); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== 7. BUTTONS (modernised 2026) ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-full); font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; min-height: 46px; min-width: 46px; letter-spacing: 0.3px; position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform 180ms cubic-bezier(.22,1,.36,1); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(0) scale(.97); } .btn svg.icon, .btn > svg { flex-shrink: 0; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* â”€â”€ Primary â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #8b3416 100%); color: var(--color-white); border-color: rgba(200, 152, 46, 0.25); box-shadow: 0 2px 6px rgba(181,69,27,.18), inset 0 1px 0 rgba(255,255,255,.12); overflow: hidden; } .btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.12) 100%); opacity: 0; transition: opacity var(--transition-base); } .btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-hover) 0%, #a0401e 100%); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(181,69,27,.32), 0 2px 6px rgba(181,69,27,.18), inset 0 1px 0 rgba(255,255,255,.14); color: var(--color-white); } .btn-primary:hover::before { opacity: 1; } .btn-primary:active { box-shadow: 0 2px 8px rgba(181,69,27,.22); } /* â”€â”€ Secondary â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .btn-secondary { background: rgba(255, 255, 255, 0.55); color: var(--color-primary); border-color: rgba(196, 90, 42, 0.3); box-shadow: 0 1px 3px rgba(0,0,0,.04); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-secondary:hover { background: rgba(196, 90, 42, 0.08); border-color: rgba(196, 90, 42, 0.5); color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(196,90,42,.12); } .btn-secondary:active { box-shadow: 0 1px 4px rgba(196,90,42,.10); } /* â”€â”€ Large â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .btn-large { padding: 16px 36px; font-size: var(--text-lg); } /* â”€â”€ Small (replaces inline padding overrides) */ .btn-sm { padding: 8px 16px; font-size: var(--text-sm); min-height: 38px; gap: 6px; } /* â”€â”€ Gold accent variant (for dark sections) */ .btn-gold { border-color: rgba(200, 152, 46, 0.45); color: #fff; background: rgba(255, 255, 255, 0.09); } .btn-gold:hover { border-color: #fff; color: #fff; background: rgba(200, 152, 46, 0.22); box-shadow: 0 4px 14px rgba(200,152,46,.18); } /* ======================================== 8. FEATURE CARDS SECTION ======================================== */ .why-choose-us { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-surface); position: relative; } .why-choose-us::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .why-choose-us h2 { text-align: center; margin-bottom: var(--spacing-2xl); color: var(--color-indigo); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-2xl); } .feature-card { background: var(--color-white); padding: var(--spacing-2xl); border-radius: var(--radius-lg); text-align: center; border: 1px solid var(--color-border); transition: all var(--transition-base); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-gold), var(--color-primary)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .feature-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--color-gold); border-radius: 2px; transition: width var(--transition-base); } .feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: rgba(200, 152, 46, 0.3); } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover::after { width: 60px; } .feature-icon { width: 64px; height: 64px; margin: 0 auto var(--spacing-lg); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(29, 52, 97, 0.06), rgba(200, 152, 46, 0.1)); color: var(--color-indigo); box-shadow: 0 2px 12px rgba(29, 52, 97, 0.08); border: 1px solid rgba(200, 152, 46, 0.15); transition: all var(--transition-base); } .feature-card:hover .feature-icon { background: linear-gradient(135deg, rgba(29, 52, 97, 0.1), rgba(200, 152, 46, 0.18)); transform: scale(1.08); } .feature-icon svg { width: 28px; height: 28px; } .feature-card h3 { margin-bottom: var(--spacing-md); color: var(--color-indigo); } .feature-card p { color: var(--color-text-light); font-size: var(--text-sm); margin-bottom: 0; } /* ======================================== 9. FEATURED ITINERARY SECTION ======================================== */ .featured-section { padding: var(--spacing-5xl) var(--container-padding); background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-light) 100%); position: relative; } .featured-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-primary)); } .featured-section h2 { text-align: center; margin-bottom: var(--spacing-2xl); } .featured-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); position: relative; } .featured-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-indigo), var(--color-gold)); z-index: 1; } .featured-image-placeholder { background: linear-gradient(135deg, var(--color-indigo) 0%, #2b1e14 60%, var(--color-primary) 100%); min-height: 300px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-2xl); font-weight: var(--weight-bold); } .featured-image-text { display: inline-flex; align-items: center; gap: 10px; } .featured-details { padding: var(--spacing-3xl); display: flex; flex-direction: column; justify-content: space-between; } .badge-group { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .badge { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); background: rgba(29, 52, 97, 0.08); color: var(--color-indigo); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.5px; } .badge.popular { background: linear-gradient(135deg, var(--color-gold), #a87b22); color: var(--color-white); border: none; } .featured-description { color: var(--color-text-light); font-size: var(--text-base); line-height: var(--line-height-relaxed); margin-bottom: var(--spacing-xl); } .featured-highlights ul { list-style: none; margin-bottom: var(--spacing-xl); } .featured-highlights li { padding: var(--spacing-md) 0; color: var(--color-text); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); } .featured-highlights li:last-child { border-bottom: none; } .featured-footer { display: flex; justify-content: space-between; align-items: center; } .price-label { display: block; font-size: var(--text-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-xs); } .price { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-primary); } /* ======================================== 10. ITINERARIES GRID ======================================== */ .itineraries-preview { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-surface); } .exclusive-section { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-surface-alt); } .itineraries-preview h2 { text-align: center; margin-bottom: var(--spacing-md); } .section-subtitle { text-align: center; color: var(--color-text-light); font-size: var(--text-lg); margin-bottom: var(--spacing-3xl); max-width: 600px; margin-left: auto; margin-right: auto; } .itineraries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-2xl); } .itinerary-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); display: flex; flex-direction: column; transition: all var(--transition-base); position: relative; box-shadow: var(--shadow-sm); } .itinerary-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(200, 152, 46, 0.35); } .card-label { background: var(--color-surface-alt); color: var(--color-rust); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--spacing-md) var(--spacing-lg); } .coming-soon-label { background: rgba(61, 61, 61, 0.1); color: var(--color-slate); } .popular-label { background: var(--color-primary); color: var(--color-white); } .itinerary-region-divider { grid-column: 1 / -1; background: var(--color-cream); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; } .itinerary-region-divider h3 { margin-bottom: var(--spacing-sm); } .itinerary-region-divider p { background: var(--color-surface); border: 1px dashed rgba(91, 70, 50, 0.2); } .btn-disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; cursor: not-allowed; filter: grayscale(20%); } .itinerary-card h3 { padding: var(--spacing-lg) var(--spacing-lg) 0; margin-bottom: var(--spacing-sm); } .card-description { padding: 0 var(--spacing-lg); color: var(--color-text-light); font-size: var(--text-sm); line-height: var(--line-height-relaxed); margin-bottom: var(--spacing-lg); } .card-specs { padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); flex-grow: 1; } .spec { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .spec:last-child { margin-bottom: 0; } .spec-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .spec-label { display: block; font-size: var(--text-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; } .spec-value { display: block; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-slate); } .card-includes { padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .includes-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-light); text-transform: uppercase; margin-bottom: var(--spacing-md); } .card-includes ul { list-style: none; } .card-includes li { font-size: var(--text-sm); color: var(--color-text); padding: var(--spacing-sm) 0; padding-left: var(--spacing-lg); position: relative; } .card-includes li::before { content: ''; position: absolute; left: 0; color: var(--color-success); font-weight: bold; } .card-footer { padding: var(--spacing-lg); display: flex; justify-content: space-between; align-items: center; } .featured-card-highlight { border: 2px solid var(--color-primary); transform: scale(1.02); box-shadow: var(--shadow-lg); } /* Free Tier Styles */ .itinerary-card.free { border: 2px solid var(--color-success); background: linear-gradient(135deg, rgba(39, 174, 96, 0.02) 0%, rgba(39, 174, 96, 0.01) 100%); position: relative; } .itinerary-card.free:hover { border-color: var(--color-success); box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.1), var(--shadow-lg); } .free-label { background: var(--color-success); color: var(--color-white); font-weight: var(--weight-bold); letter-spacing: 0.5px; } .itinerary-card.free .price { color: var(--color-success); font-weight: var(--weight-bold); font-size: var(--text-2xl); } /* ======================================== 10b. EXCLUSIVE EXPERIENCE ======================================== */ .exclusive-exp { position: relative; padding: var(--spacing-5xl) var(--container-padding); text-align: center; color: var(--color-white); overflow: hidden; } .exclusive-exp__bg { position: absolute; inset: 0; background: linear-gradient(160deg, #0c1b33 0%, #1d3461 40%, #6b1624 100%); z-index: 0; } .exclusive-exp__bg::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(200,152,46,.05) 40px, rgba(200,152,46,.05) 80px), radial-gradient(ellipse 600px 400px at 30% 60%, rgba(200,152,46,.10) 0%, transparent 70%), radial-gradient(ellipse 500px 300px at 70% 30%, rgba(107,22,36,.20) 0%, transparent 70%); pointer-events: none; } .exclusive-exp__bg::after { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 10%, var(--color-gold, #c8982e) 50%, transparent 90%); } .exclusive-exp__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; } .exclusive-exp__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(200,152,46,.18); border: 1px solid rgba(200,152,46,.35); color: var(--color-gold, #c8982e); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 6px 18px; border-radius: 20px; margin-bottom: 20px; } .exclusive-exp__title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--color-white); margin-bottom: 14px; line-height: 1.25; } .exclusive-exp__subtitle { font-size: 1.05rem; color: rgba(255,255,255,.82); line-height: 1.75; max-width: 620px; margin: 0 auto 32px; } .exclusive-exp__features { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; } .exclusive-exp__feature { display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 18px 22px; min-width: 140px; backdrop-filter: blur(4px); transition: background .25s, border-color .25s; } .exclusive-exp__feature:hover { background: rgba(200,152,46,.12); border-color: rgba(200,152,46,.30); } .exclusive-exp__icon { font-size: 1.6rem; line-height: 1; } .exclusive-exp__feature span:last-child { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.88); line-height: 1.45; text-align: center; } .exclusive-exp__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; padding: 16px 40px; border-radius: 8px; transition: gap .2s, transform .2s; } .exclusive-exp__btn:hover { gap: 12px; transform: translateY(-1px); } .exclusive-exp__note { margin-top: 14px; font-size: .8rem; color: rgba(255,255,255,.5); letter-spacing: .02em; } @media (max-width: 640px) { .exclusive-exp__features { gap: 12px; } .exclusive-exp__feature { min-width: 120px; padding: 14px 16px; } .exclusive-exp__icon { font-size: 1.3rem; } } /* ======================================== 11. CTA SECTION ======================================== */ .cta-section { padding: var(--spacing-5xl) var(--container-padding); background: linear-gradient(135deg, var(--color-indigo) 0%, #0f1f3a 50%, var(--color-maroon) 100%); text-align: center; color: var(--color-white); position: relative; overflow: hidden; } .cta-section::after { content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(200, 152, 46, 0.08) 0%, transparent 70%); pointer-events: none; } .cta-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8982e' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M20 0L0 20l20 20 20-20z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .cta-section h2 { color: var(--color-white); margin-bottom: var(--spacing-lg); position: relative; } .cta-section p { color: rgba(255, 255, 255, 0.9); font-size: var(--text-lg); margin-bottom: var(--spacing-2xl); position: relative; } .cta-section .btn { position: relative; } /* ======================================== 12. FAQ SECTION ======================================== */ .faq-section { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-light); } .faq-section h2 { text-align: center; margin-bottom: var(--spacing-2xl); color: var(--color-indigo); } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-2xl); } .faq-item { background: var(--color-white); padding: var(--spacing-2xl); border-radius: var(--radius-lg); border-left: 2px solid rgba(255, 255, 255, 0.84); box-shadow: var(--shadow-sm); transition: all var(--transition-base); } .faq-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .faq-item h3 { color: var(--color-indigo); margin-bottom: var(--spacing-md); } .faq-item p { color: var(--color-text-light); font-size: var(--text-sm); line-height: var(--line-height-relaxed); margin-bottom: 0; } /* ======================================== 12a. BLOG PREVIEW SECTION ======================================== */ .blog-preview { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-surface); text-align: center; } .blog-preview h2 { color: var(--color-indigo); margin-bottom: var(--spacing-sm); } .blog-preview__subtitle { color: var(--color-text-light); font-size: var(--text-lg); margin-bottom: var(--spacing-2xl); max-width: 560px; margin-left: auto; margin-right: auto; } .blog-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); } .blog-preview__card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all var(--transition-base); } .blog-preview__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(200, 152, 46, 0.3); } .blog-preview__card:hover .blog-preview__img { transform: scale(1.06); } .blog-preview__img { height: 170px; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .blog-preview__body { padding: var(--spacing-xl); text-align: left; flex: 1; display: flex; flex-direction: column; } .blog-preview__tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.8px; color: #fff; background: rgba(200, 152, 46, 0.1); border: 1px solid rgba(200, 152, 46, 0.18); margin-bottom: var(--spacing-md); width: fit-content; } .blog-preview__body h3 { font-size: var(--text-lg); color: var(--color-slate); margin-bottom: var(--spacing-sm); line-height: var(--line-height-tight); } .blog-preview__body p { color: var(--color-text-light); font-size: var(--text-sm); line-height: var(--line-height-relaxed); margin-bottom: 0; flex: 1; } .blog-preview__cta { text-align: center; } @media (max-width: 900px) { .blog-preview__grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } } @media (min-width: 601px) and (max-width: 900px) { .blog-preview__grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; } } /* ======================================== 12b. RAJASTHAN INTERACTIVE MAP ======================================== */ .rj-section { background: linear-gradient(180deg, var(--color-light) 0%, #f5ead8 50%, var(--color-surface) 100%); padding: var(--spacing-5xl) var(--container-padding); text-align: center; position: relative; overflow: hidden; } /* Subtle decorative Rajasthani border pattern */ .rj-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 90deg, var(--color-primary) 0px, var(--color-primary) 12px, var(--color-gold) 12px, var(--color-gold) 18px, var(--color-indigo) 18px, var(--color-indigo) 30px, var(--color-gold) 30px, var(--color-gold) 36px ); } .rj-section h2 { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--color-primary); margin-bottom: var(--spacing-sm); } .rj-tagline { font-size: var(--text-base); color: var(--color-earth); margin-bottom: var(--spacing-3xl); max-width: 640px; margin-inline: auto; line-height: var(--line-height-relaxed); } .rj-tagline strong { color: var(--color-slate); } .rj-layout { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--spacing-3xl); max-width: var(--container-max); margin: 0 auto; } /* Map container */ .rj-map-wrap { flex: 1 1 520px; max-width: 620px; position: relative; } .rj-map-wrap svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 24px rgba(26, 18, 11, 0.12)); } /* SVG region paths */ .div-region { stroke: rgba(255, 248, 230, 0.7); stroke-width: 2.5; stroke-linejoin: round; cursor: pointer; transition: filter 0.3s ease, opacity 0.3s ease, stroke-width 0.3s ease; transform-origin: center; } .div-region:hover { filter: brightness(1.18) drop-shadow(0 0 10px rgba(200, 152, 46, 0.45)); stroke-width: 3; stroke: rgba(255, 215, 0, 0.6); } .div-region.dim { opacity: 0.3; filter: saturate(0.3) brightness(0.85); } .div-region.selected { filter: brightness(1.2) drop-shadow(0 0 14px rgba(200, 152, 46, 0.6)); stroke: #FFD700; stroke-width: 3.5; } .lbl-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; fill: #fff; pointer-events: none; text-anchor: middle; paint-order: stroke; stroke: rgba(26, 18, 11, 0.5); stroke-width: 3px; letter-spacing: 0.5px; } .lbl-sub { font-family: var(--font-sans); font-size: 8px; fill: rgba(255, 255, 255, 0.75); pointer-events: none; text-anchor: middle; letter-spacing: 0.3px; } .lbl-border { font-size: 8.5px; fill: var(--color-rust); font-style: italic; pointer-events: none; opacity: 0.7; } /* Tooltip on hover */ .rj-tooltip { position: absolute; background: rgba(42, 30, 20, 0.94); color: #fff; padding: 12px 18px; border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.6; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; max-width: 240px; z-index: 10; backdrop-filter: blur(6px); border: 1px solid rgba(200, 152, 46, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .rj-tooltip.show { opacity: 1; } .rj-tooltip strong { color: #fff; } /* Right panel (legend + detail) */ .rj-right-panel { flex: 1 1 340px; max-width: 420px; text-align: left; position: relative; } /* Legend panel */ .rj-legend { text-align: left; } .rj-legend h3 { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-primary); border-bottom: 2px solid var(--color-surface-alt); padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .legend-card { display: flex; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-sm); border-bottom: 1px solid var(--color-surface-alt); border-radius: var(--radius-md); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .legend-card:last-child { border-bottom: none; } .legend-card:hover { background: var(--color-surface); transform: translateX(4px); } .legend-card.active { background: var(--color-surface); box-shadow: inset 3px 0 0 var(--color-gold); } .legend-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; border: 2px solid rgba(255, 248, 230, 0.8); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease; } .legend-card:hover .legend-dot { transform: scale(1.2); } .legend-card h4 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-slate); margin-bottom: 1px; } .legend-capital { font-weight: var(--weight-normal); font-size: var(--text-xs); color: var(--color-primary); } .legend-card p { font-size: var(--text-xs); color: var(--color-earth); line-height: 1.45; margin: 0; } /* â”€â”€ Region Detail Panel â”€â”€ */ .rj-detail { display: none; margin-top: var(--spacing-xl); background: var(--color-cream); border: 1px solid var(--color-surface-alt); border-radius: var(--radius-xl); padding: var(--spacing-xl); position: relative; animation: detailSlideIn 0.35s ease-out; box-shadow: 0 8px 32px rgba(26, 18, 11, 0.1); } .rj-detail.open { display: block; } @keyframes detailSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .rj-detail-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; color: var(--color-earth); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s, color 0.2s; } .rj-detail-close:hover { background: var(--color-surface-alt); color: var(--color-primary); } .rj-detail-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-surface-alt); } .rj-detail-dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; border: 3px solid rgba(255, 248, 230, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .rj-detail-header h3 { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-slate); margin: 0; line-height: 1.2; } .rj-detail-subtitle { font-size: var(--text-xs); color: var(--color-earth); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--weight-medium); } .rj-detail-body { display: flex; flex-direction: column; gap: var(--spacing-md); } .rj-detail-field { margin: 0; } .rj-detail-label { display: block; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: 4px; } .rj-detail-field p { font-size: var(--text-sm); color: var(--color-text); margin: 0; line-height: 1.5; } .rj-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .rj-detail-list li { background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--color-border); white-space: nowrap; } .rj-detail-experiences li { background: rgba(181, 69, 27, 0.06); border-color: rgba(181, 69, 27, 0.15); color: var(--color-brown); } .rj-detail-meta { display: flex; gap: var(--spacing-xl); padding-top: var(--spacing-sm); border-top: 1px solid var(--color-surface-alt); margin-top: var(--spacing-xs); } .rj-detail-meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-earth); } .rj-detail-meta-item svg { color: #fff; flex-shrink: 0; } .rj-detail-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--spacing-sm); padding: 10px 20px; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; transition: background 0.25s ease, transform 0.2s ease; align-self: flex-start; } .rj-detail-cta:hover { background: var(--color-primary-hover); transform: translateX(3px); text-decoration: none; color: #fff; } /* Responsive map */ @media (max-width: 900px) { .rj-layout { flex-direction: column; align-items: center; } .rj-map-wrap { max-width: 100%; } .rj-right-panel { max-width: 100%; } .rj-legend { max-width: 100%; } } @media (max-width: 480px) { .rj-section h2 { font-size: var(--text-2xl); } .rj-tagline { font-size: var(--text-sm); } .legend-card h4 { font-size: var(--text-sm); } .legend-card p { font-size: var(--text-xs); } .rj-detail { padding: var(--spacing-lg); } .rj-detail-header h3 { font-size: var(--text-lg); } .rj-detail-meta { flex-direction: column; gap: var(--spacing-sm); } .rj-detail-list { gap: 4px; } } /* ======================================== 13. FOOTER ======================================== */ .footer { background: linear-gradient(135deg, #0f1a2e 0%, #1a120b 50%, #1d3461 100%); color: var(--color-white); padding: var(--spacing-5xl) var(--container-padding) var(--spacing-2xl); position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-indigo)); } .footer-container { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); } .footer-brand p { line-height: 1.7; max-width: 320px; } .footer-section h3 { color: #fff; margin-bottom: var(--spacing-lg); font-size: var(--text-lg); letter-spacing: 0.02em; } .footer-section p { color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); margin-bottom: var(--spacing-md); line-height: 1.6; } .footer-section ul { list-style: none; } .footer-section li { margin-bottom: var(--spacing-sm); } .footer-section a { color: rgba(255, 255, 255, 0.75); transition: color 0.25s ease, padding-left 0.25s ease; font-size: var(--text-sm); } .footer-section a:hover { color: #fff; padding-left: 4px; text-decoration: none; } /* Social Links */ .social-links { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; } .social-link:hover { transform: translateY(-3px); padding-left: 0 !important; text-decoration: none; } .social-instagram:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; } .social-youtube:hover { background: #ff0000; color: #fff; } .social-twitter:hover { background: #000; color: #fff; } .social-whatsapp:hover { background: #25d366; color: #fff; } .social-email:hover { background: var(--color-gold); color: #1a120b; } .social-link svg { flex-shrink: 0; } /* Footer Contact List */ .footer-contact-list { list-style: none; padding: 0; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--spacing-md); color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); line-height: 1.5; } .footer-contact-icon { flex-shrink: 0; margin-top: 2px; stroke: var(--color-gold); opacity: 0.8; } /* Newsletter */ .footer-newsletter { margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-newsletter h4 { color: #fff; font-size: var(--text-base); margin-bottom: var(--spacing-xs); letter-spacing: 0.02em; } .footer-newsletter p { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-bottom: var(--spacing-md); } .newsletter-form { display: flex; gap: 0; max-width: 320px; } .newsletter-form input[type="email"] { flex: 1; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.15); border-right: none; border-radius: 6px 0 0 6px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: var(--text-sm); outline: none; transition: border-color 0.3s ease, background 0.3s ease; } .newsletter-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.35); } .newsletter-form input[type="email"]:focus { border-color: #fff; background: rgba(255, 255, 255, 0.1); } .newsletter-form button { padding: 10px 16px; border: 1.5px solid var(--color-gold); border-radius: 0 var(--radius-full) var(--radius-full) 0; background: var(--color-gold); color: #1a120b; cursor: pointer; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), box-shadow var(--transition-base), transform 180ms cubic-bezier(.22,1,.36,1); } .newsletter-form button:hover { background: #d4a432; box-shadow: 0 4px 12px rgba(200,152,46,.28); transform: translateX(2px); } .newsletter-form button:active { transform: translateX(0) scale(.95); box-shadow: 0 1px 4px rgba(200,152,46,.18); } .newsletter-form button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* Footer Bottom */ .footer-bottom { border-top: 1px solid rgba(200, 152, 46, 0.12); padding-top: var(--spacing-xl); text-align: center; color: rgba(255, 255, 255, 0.45); font-size: var(--text-sm); } .footer-bottom-inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); } .footer-payments { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; opacity: 0.75; } .footer-payments .pay-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: transparent; color: rgba(255,255,255,0.75); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; } .footer-payments .pay-badge svg { width: 11px; height: 11px; stroke: rgba(255,255,255,0.55); fill: none; stroke-width: 2; } .footer-payments .pay-badge .brand { font-weight: 700; } .footer-payments .pay-logo.visa .brand, .footer-payments .pay-logo.mc .brand, .footer-payments .pay-logo.amex .brand, .footer-payments .pay-logo.upi .brand { color: rgba(255,255,255,0.75); } .footer-bottom-links { display: flex; align-items: center; gap: var(--spacing-sm); } .footer-bottom-links a { color: rgba(255, 255, 255, 0.45); font-size: var(--text-sm); transition: color 0.25s ease; } .footer-bottom-links a:hover { color: #fff; text-decoration: none; } .footer-dot { color: rgba(255, 255, 255, 0.2); } /* Back to Top */ .back-to-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; border-radius: 50%; background: var(--color-gold); color: #1a120b; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; z-index: 90; opacity: 0; pointer-events: none; transform: translateY(16px); } .back-to-top.visible { opacity: 0.9; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { transform: translateY(-3px); opacity: 1; box-shadow: 0 6px 24px rgba(200, 152, 46, 0.4); } /* ======================================== 14. RESPONSIVE DESIGN ======================================== */ @media (max-width: 1024px) { .footer-container { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --text-4xl: 32px; --text-3xl: 26px; --text-2xl: 20px; --text-xl: 17px; --text-lg: 15px; --spacing-5xl: 36px; --spacing-4xl: 28px; --spacing-3xl: 20px; --spacing-2xl: 14px; --spacing-xl: 10px; --container-padding: 16px; } html { font-size: 15px; } /* === NAVBAR & MOBILE MENU === */ .navbar { height: 60px; overflow: visible; } .navbar-container { height: 60px; padding: 0 14px; } .logo-img { width: 168px; max-height: 56px; } .nav-links { display: none; } .hamburger-btn { display: inline-flex; font-size: 24px; min-height: 44px; min-width: 44px; } .mobile-menu { display: flex; top: 0; left: auto; right: 0; width: min(86vw, 340px); height: 100vh; max-height: none; transform: translateX(100%); transition: transform 0.3s ease-out; animation: none; } .mobile-menu.active { transform: translateX(0); } .mobile-menu-links { padding-top: 72px; } .mobile-menu-links a { padding: var(--spacing-lg) var(--spacing-xl); font-size: 16px; } /* === CARD OPTIMIZATIONS === */ .features-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } .feature-card { padding: var(--spacing-lg); text-align: center; } .feature-icon { font-size: 36px; margin-bottom: var(--spacing-md); } .feature-card h3 { font-size: var(--text-base); margin-bottom: var(--spacing-sm); } .feature-card p { font-size: 13px; } /* Featured card optimizations */ .featured-section { padding: var(--spacing-2xl) var(--container-padding); } .featured-card { grid-template-columns: 1fr; gap: var(--spacing-lg); } .featured-image-placeholder { min-height: 200px; font-size: var(--text-xl); } .featured-details { padding: var(--spacing-lg); } .badge-group { gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .badge { padding: var(--spacing-xs) var(--spacing-md); font-size: 11px; } .featured-description { font-size: 14px; margin-bottom: var(--spacing-md); } .featured-highlights li { padding: var(--spacing-sm) 0; font-size: 13px; } .featured-footer { flex-direction: column; gap: var(--spacing-lg); align-items: flex-start; } .price { font-size: var(--text-2xl); } /* Itineraries grid optimizations */ .itineraries-preview { padding: var(--spacing-2xl) var(--container-padding); } .itineraries-preview h2 { font-size: var(--text-2xl); margin-bottom: var(--spacing-md); } .section-subtitle { font-size: var(--text-base); margin-bottom: var(--spacing-2xl); } .itineraries-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } .itinerary-card { border-radius: var(--radius-md); } .card-label { padding: var(--spacing-md); font-size: 10px; } .itinerary-card h3 { padding: var(--spacing-md) var(--spacing-md) 0; font-size: var(--text-base); margin-bottom: var(--spacing-xs); } .card-description { padding: 0 var(--spacing-md); font-size: 13px; margin-bottom: var(--spacing-md); line-height: 1.5; } .card-specs { padding: var(--spacing-md); } .spec { gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .spec-icon { font-size: 16px; min-width: 16px; } .spec-label { font-size: 10px; } .spec-value { font-size: 13px; } .card-includes { padding: var(--spacing-md); } .includes-label { font-size: 10px; margin-bottom: var(--spacing-md); } .card-includes li { font-size: 12px; padding: var(--spacing-xs) 0; padding-left: var(--spacing-md); } .card-footer { padding: var(--spacing-md); flex-direction: column; gap: var(--spacing-md); align-items: stretch; } .card-footer a { width: 100%; text-align: center; } /* CTA section */ .cta-section { padding: var(--spacing-2xl) var(--container-padding); } .cta-section h2 { font-size: var(--text-2xl); margin-bottom: var(--spacing-md); } .cta-section p { font-size: var(--text-base); margin-bottom: var(--spacing-xl); } /* FAQ section */ .faq-section { padding: var(--spacing-2xl) var(--container-padding); } .hero { padding: var(--spacing-3xl) var(--container-padding); min-height: auto; } .hero.hero-photo { min-height: 360px; max-height: 70vh; } .hero h1 { font-size: 28px; } .hero-subtitle { font-size: var(--text-sm); letter-spacing: 0.8px; margin-bottom: var(--spacing-lg); } .hero-badge { font-size: 10px; padding: 5px 14px; margin-bottom: var(--spacing-lg); } .hero-actions { gap: var(--spacing-md); } .hero-actions .btn, .hero-actions .btn-ghost { padding: var(--spacing-md) var(--spacing-lg); font-size: var(--text-sm); min-height: 40px; } .dest-slider { height: 45vh; min-height: 280px; max-height: 380px; } .blog-preview__img { height: 140px; } .features-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } .featured-card { grid-template-columns: 1fr; } .featured-image-placeholder { min-height: 250px; } .featured-details { padding: var(--spacing-xl); } .featured-footer { flex-direction: column; gap: var(--spacing-lg); align-items: flex-start; } .card-footer { flex-direction: column; gap: var(--spacing-lg); align-items: flex-start; } .btn { width: 100%; justify-content: center; min-height: 48px; font-size: var(--text-base); padding: var(--spacing-md) var(--spacing-lg); } .btn-large { min-height: 48px; } .cta-section { text-align: center; padding: var(--spacing-2xl) var(--container-padding); } .why-choose-us, .featured-section, .itineraries-preview, .faq-section { padding: var(--spacing-3xl) var(--container-padding); } .faq-grid { grid-template-columns: 1fr; } .footer-container { grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); } .footer-bottom-inner { justify-content: center; text-align: center; } } @media (max-width: 480px) { :root { --text-3xl: 22px; --text-2xl: 18px; --text-xl: 15px; --text-lg: 14px; --text-base: 14px; --spacing-5xl: 28px; --spacing-4xl: 20px; --spacing-3xl: 16px; --spacing-2xl: 10px; --spacing-xl: 8px; --spacing-lg: 8px; --container-padding: 12px; } html { font-size: 14px; } body { line-height: var(--line-height-normal); } h1 { font-size: 24px; margin-bottom: var(--spacing-lg); } h2 { font-size: 20px; margin-bottom: var(--spacing-md); } h3 { font-size: var(--text-base); } p { margin-bottom: var(--spacing-md); } .hero.hero-photo { min-height: 300px; } .hero h1 { font-size: 24px; } .dest-slider { height: 38vh; min-height: 240px; max-height: 320px; } .blog-preview__img { height: 120px; } /* === NAVBAR & HAMBURGER MENU === */ .navbar { padding: var(--spacing-sm) 0; height: 60px; overflow: visible; } .navbar-container { padding: var(--spacing-sm) var(--container-padding); height: 60px; } .logo { flex-shrink: 0; line-height: 0; } .logo-img { width: 160px; max-height: 60px; } .hamburger-btn { display: inline-flex; font-size: 24px; padding: var(--spacing-sm); min-height: 44px; min-width: 44px; } .nav-links { display: none; } .mobile-menu { top: 0; max-height: none; } .mobile-menu-links a { padding: var(--spacing-md) var(--spacing-lg); font-size: 14px; } /* === CARD OPTIMIZATIONS FOR SMALL SCREENS === */ .features-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } .feature-card { padding: var(--spacing-md); text-align: center; } .feature-icon { font-size: 32px; margin-bottom: var(--spacing-md); } .feature-card h3 { font-size: 14px; margin-bottom: var(--spacing-xs); } .feature-card p { font-size: 12px; } .featured-section { padding: var(--spacing-2xl) var(--container-padding); } .featured-card { grid-template-columns: 1fr; gap: var(--spacing-sm); border-radius: var(--radius-md); } .featured-image-placeholder { min-height: 150px; font-size: var(--text-lg); } .featured-details { padding: var(--spacing-md); } .featured-description { font-size: 13px; margin-bottom: var(--spacing-sm); } .badge { padding: var(--spacing-xs) var(--spacing-sm); font-size: 10px; } .featured-highlights li { padding: var(--spacing-xs) 0; font-size: 12px; } .featured-footer { flex-direction: column; gap: var(--spacing-md); } .price { font-size: var(--text-xl); } .itineraries-preview { padding: var(--spacing-xl) var(--container-padding); } .section-subtitle { font-size: 13px; margin-bottom: var(--spacing-xl); } .itineraries-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } .itinerary-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .card-label { padding: var(--spacing-xs) var(--spacing-md); font-size: 10px; } .itinerary-card h3 { padding: var(--spacing-sm) var(--spacing-md) 0; font-size: 14px; margin-bottom: 2px; } .card-description { padding: 0 var(--spacing-md); font-size: 12px; margin-bottom: var(--spacing-sm); line-height: 1.4; } .card-specs { padding: var(--spacing-sm); border-bottom: 1px solid var(--color-border); } .spec { gap: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .spec:last-child { margin-bottom: 0; } .spec-icon { font-size: 14px; } .spec-label { font-size: 9px; } .spec-value { font-size: 12px; } .card-includes { padding: var(--spacing-sm); border-bottom: 1px solid var(--color-border); } .includes-label { font-size: 9px; margin-bottom: var(--spacing-xs); } .card-includes ul { margin: 0; padding: 0; } .card-includes li { font-size: 11px; padding: var(--spacing-xs) 0; padding-left: var(--spacing-md); margin-bottom: var(--spacing-xs); } .card-footer { padding: var(--spacing-sm); flex-direction: column; gap: var(--spacing-sm); } .card-footer .price { font-size: var(--text-lg); } .card-footer .btn { width: 100%; padding: var(--spacing-sm) var(--spacing-md); font-size: 12px; min-height: 36px; } .cta-section { padding: var(--spacing-xl) var(--container-padding); } .cta-section h2 { font-size: 20px; margin-bottom: var(--spacing-md); } .cta-section p { font-size: 13px; margin-bottom: var(--spacing-lg); } .faq-section { padding: var(--spacing-xl) var(--container-padding); } .btn { width: 100%; padding: var(--spacing-md) var(--spacing-lg); min-height: 44px; font-size: var(--text-sm); } .btn-secondary { padding: var(--spacing-md) var(--spacing-lg); } form { gap: var(--spacing-md) !important; } input, textarea, select { font-size: 16px !important; min-height: 44px; padding: var(--spacing-md); border: 2px solid var(--color-border); border-radius: var(--radius-md); } .form-group, .form-field { margin-bottom: var(--spacing-lg); } .container { padding: 0 var(--container-padding); } .footer-container { grid-template-columns: 1fr; gap: var(--spacing-xl); padding: 0 var(--container-padding); } .footer-section { text-align: center; } .footer-section ul { list-style: none; } .social-links { justify-content: center; } .footer-contact-list li { justify-content: center; } .newsletter-form { margin: 0 auto; } .footer-bottom-inner { flex-direction: column; gap: var(--spacing-sm); } .back-to-top { bottom: 20px; right: 16px; width: 40px; height: 40px; } } /* ======================================== 15. MOBILE-FIRST OPTIMIZATIONS ======================================== */ /* Mobile touch device optimizations */ @media (hover: none) and (pointer: coarse) { .btn, button, a, input, select, textarea { min-height: 44px; min-width: 44px; } .nav-link { padding: var(--spacing-md) var(--spacing-lg); min-height: 48px; } .category-badge, .badge { min-height: 44px; padding: var(--spacing-md); } } /* Large text mode (accessibility) */ @media (min-width: 1200px) { :root { --text-4xl: 48px; --text-3xl: 32px; } } /* Small font size adjustment for very small screens */ @media (max-width: 320px) { :root { --text-xl: 16px; --text-lg: 15px; --text-base: 14px; --spacing-lg: 12px; --spacing-xl: 16px; } } /* Orientation adjustments */ @media (orientation: landscape) and (max-height: 500px) { .hero, .navbar { padding: var(--spacing-lg); } .nav-links { gap: var(--spacing-sm); } } /* ======================================== 16. ACCESSIBILITY ======================================== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus visible for keyboard navigation */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Skip to main content link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: white; padding: var(--spacing-lg); text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } /* Print styles */ @media print { .navbar, .footer { display: none; } body { background: white; } } /* ======================================== 16. UTILITY CLASSES ======================================== */ .text-center { text-align: center; } /* Related links block for SEO/internal navigation modules */ .related-guides { margin-top: 2rem; padding: 1rem; border: 1px solid rgba(91, 70, 50, 0.15); border-radius: 12px; background: #fff8ef; } .related-guides h2 { margin-top: 0; } .text-right { text-align: right; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ======================================== 17. COMPARISON TABLE ======================================== */ .comparison-section { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-white); } .comparison-section h2 { text-align: center; margin-bottom: var(--spacing-3xl); } .comparison-table { width: 100%; border-collapse: collapse; background: var(--color-cream); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .comparison-table thead { background: linear-gradient(135deg, var(--color-indigo), #2a4a7f); } .comparison-table th { color: var(--color-white); padding: var(--spacing-lg); text-align: left; font-weight: var(--weight-semibold); border-bottom: 2px solid var(--color-gold); } .comparison-table td { padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); color: var(--color-text); } .comparison-table tbody tr:hover { background: rgba(211, 84, 0, 0.02); } .comparison-table tbody tr:last-child td { border-bottom: none; } /* ======================================== 18. BLOG PAGE STYLES ======================================== */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-2xl); margin-top: var(--spacing-3xl); } .blog-post-card { background: var(--color-cream); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: all var(--transition-base); display: flex; flex-direction: column; } .blog-post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .blog-image { background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-primary) 100%); height: 200px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 48px; } .blog-content { padding: var(--spacing-xl); flex-grow: 1; display: flex; flex-direction: column; } .blog-date { font-size: var(--text-xs); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-sm); } .blog-post-card h3 { margin-bottom: var(--spacing-md); } .blog-excerpt { color: var(--color-text-light); font-size: var(--text-sm); line-height: var(--line-height-relaxed); margin-bottom: var(--spacing-lg); flex-grow: 1; } /* ======================================== 19. CONTACT PAGE STYLES ======================================== */ .contact-section { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-surface); } .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); margin-top: var(--spacing-3xl); } .contact-info { background: var(--color-white); padding: var(--spacing-2xl); border-radius: var(--radius-lg); border: 1px solid rgba(91, 70, 50, 0.12); box-shadow: var(--shadow-sm); } .contact-info h3 { margin-bottom: var(--spacing-lg); } .contact-item { margin-bottom: var(--spacing-xl); display: flex; gap: var(--spacing-lg); align-items: flex-start; } .contact-icon { font-size: 24px; min-width: 30px; } .contact-item p { color: var(--color-text-light); margin-bottom: 0; } .contact-item a { color: var(--color-primary); } .contact-form { background: var(--color-white); padding: var(--spacing-2xl); border-radius: var(--radius-lg); border: 1px solid rgba(91, 70, 50, 0.12); box-shadow: var(--shadow-sm); } /* ======================================== 20. LEGAL PAGES ======================================== */ .legal-hero { padding: var(--spacing-5xl) var(--container-padding) var(--spacing-4xl); background: linear-gradient(135deg, var(--color-indigo) 0%, #2b1e14 50%, var(--color-primary) 100%); border-bottom: 3px solid var(--color-gold); text-align: center; color: var(--color-white); } .legal-hero h1, .legal-hero h2 { color: var(--color-white); } .legal-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: var(--text-xs); color: #fff; margin-bottom: var(--spacing-md); } .legal-subtitle { color: rgba(255, 255, 255, 0.8); font-size: var(--text-lg); max-width: 640px; margin: 0 auto; } .legal-section { padding: var(--spacing-5xl) var(--container-padding); background: var(--color-surface); } .legal-card { max-width: 900px; margin: 0 auto; background: var(--color-white); border-radius: var(--radius-xl); padding: var(--spacing-3xl); box-shadow: var(--shadow-md); border: 1px solid rgba(91, 70, 50, 0.12); } .legal-card h2 { margin-top: var(--spacing-2xl); } .legal-card ul { margin: var(--spacing-md) 0 var(--spacing-xl) var(--spacing-xl); } .legal-card li { margin-bottom: var(--spacing-sm); color: var(--color-text); } .last-updated { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-earth); margin-bottom: var(--spacing-xl); } @media (max-width: 768px) { .legal-hero { padding: var(--spacing-4xl) var(--container-padding) var(--spacing-3xl); } .legal-card { padding: var(--spacing-2xl); } } @media (max-width: 768px) { .contact-wrapper { grid-template-columns: 1fr; } .contact-section { padding: var(--spacing-2xl) var(--container-padding); } .contact-form { padding: var(--spacing-lg); } .contact-info { padding: var(--spacing-lg); } .comparison-table { font-size: var(--text-sm); } .comparison-table th, .comparison-table td { padding: var(--spacing-md); } .blog-grid { grid-template-columns: 1fr; } /* Form improvements for mobile */ form { display: flex; flex-direction: column; gap: var(--spacing-md); } .form-group, .booking-form-group { display: flex; flex-direction: column; gap: var(--spacing-md); } input, textarea, select { width: 100%; min-height: 44px; padding: var(--spacing-md); font-size: 16px; } label { display: block; margin-bottom: var(--spacing-sm); font-weight: var(--weight-semibold); } } /* ======================================== PERFORMANCE OPTIMIZATIONS ======================================== */ /* Skip rendering of off-screen sections until scrolled into view */ .why-choose-us, .explore-rajasthan, .featured-itinerary, .destinations-slider, .blog-preview, .cta-section, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 400px; } /* Contain paint/layout to card boundaries for faster compositing */ .featured-card, .dest-card, .blog-card, .itinerary-card { contain: layout style paint; } /* Reduce expensive effects on low-power / mobile devices */ @media (max-width: 768px) { .navbar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* Honor data-saving preference */ @media (prefers-reduced-data: reduce) { .hero-slides { display: none; } .hero-photo { background-color: var(--color-primary); background-image: var(--hero-fallback-image, none); background-size: cover; background-position: center; } } /* ======================================== LANGUAGE SWITCHER ======================================== */ .lang-switcher { position: relative; margin-left: var(--spacing-md); display: flex; align-items: center; gap: 8px; } .lang-btn { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; padding: 7px 14px; border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-medium); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); white-space: nowrap; } .lang-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); } .lang-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.36); box-shadow: 0 10px 20px rgba(0,0,0,.25); } .lang-btn:focus-visible { outline: 2px solid rgba(255,255,255,.45); outline-offset: 2px; } .lang-btn svg { width: 16px; height: 16px; opacity: 0.75; } .lang-btn .lang-label { letter-spacing: 0.08em; } .lang-btn .lang-caret { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.2s ease; } .lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); } .lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(11, 18, 32, 0.98); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 8px 0; min-width: 180px; box-shadow: 0 12px 36px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; z-index: 1100; } .lang-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: rgba(255,255,255,.86); font-size: 14px; font-family: var(--font-body); cursor: pointer; transition: background 0.15s; text-decoration: none; border: none; background: none; width: 100%; text-align: left; } .lang-option:hover { background: rgba(255,255,255,.09); color: #fff; } .lang-option .lang-name { flex: 1; } .lang-option .lang-native { font-size: 12px; opacity: 0.55; } .lang-option.active { color: #fff; background: rgba(255,255,255,.1); } /* ======================================== INTERNATIONAL VISITORS BANNER ======================================== */ .intl-banner { background: linear-gradient(135deg, #1d3461 0%, #162b4d 40%, #1a3a5c 70%, #1d3461 100%); padding: 0 0 var(--spacing-3xl); position: relative; overflow: hidden; } .intl-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23fff' opacity='.03'/%3E%3C/svg%3E"), radial-gradient(ellipse at 20% 50%, rgba(200,152,46,0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(181,69,27,0.05) 0%, transparent 50%); pointer-events: none; } /* Decorative top arch */ .intl-decor-top { width: 100%; line-height: 0; margin-bottom: var(--spacing-2xl); } .intl-decor-top svg { width: 100%; height: 40px; } .intl-banner .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); position: relative; } /* --- Header with globe --- */ .intl-header { text-align: center; margin-bottom: var(--spacing-2xl); } .intl-header-icon { width: 48px; height: 48px; margin: 0 auto var(--spacing-sm); color: #fff; opacity: 0.7; animation: intlGlobeSpin 20s linear infinite; } .intl-header-icon svg { width: 100%; height: 100%; } @keyframes intlGlobeSpin { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } } .intl-header h2 { font-family: var(--font-serif); color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: var(--spacing-sm); letter-spacing: -0.01em; } .intl-header p { color: rgba(255,255,255,0.65); font-size: var(--text-lg); max-width: 560px; margin: 0 auto; line-height: 1.7; } /* --- Trust Stats Bar --- */ .intl-stats { display: flex; justify-content: center; align-items: center; gap: var(--spacing-xl); margin-bottom: var(--spacing-2xl); padding: var(--spacing-lg) var(--spacing-xl); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl, 16px); backdrop-filter: blur(4px); flex-wrap: wrap; } .intl-stat { text-align: center; min-width: 140px; } .intl-stat-number { display: block; font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: var(--weight-bold); color: #fff; line-height: 1.2; } .intl-stat-number small { font-size: 0.55em; opacity: 0.7; } .intl-stat-label { display: block; font-size: var(--text-xs, 12px); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; } .intl-stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); } /* --- Country Tabs --- */ .intl-country-tabs { margin-bottom: var(--spacing-2xl); } .intl-tab-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .intl-tab { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); padding: 10px 20px; border-radius: var(--radius-full); font-size: var(--text-sm); font-family: var(--font-body); font-weight: var(--weight-medium); cursor: pointer; transition: all 0.25s ease; } .intl-tab .flag { font-size: 18px; } .intl-tab:hover { background: rgba(255,255,255,0.1); color: #fff; } .intl-tab.active { background: rgba(200, 152, 46, 0.18); border-color: rgba(200, 152, 46, 0.5); color: #fff; box-shadow: 0 0 20px rgba(200, 152, 46, 0.1); } /* Tab panels */ .intl-tab-panels { position: relative; min-height: 120px; } .intl-tab-panel { display: none; animation: intlFadeIn 0.35s ease; } .intl-tab-panel.active { display: block; } @keyframes intlFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .intl-tab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); } .intl-tip { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); transition: background 0.2s; } .intl-tip:hover { background: rgba(255,255,255,0.08); } .intl-tip-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; } .intl-tip div { color: rgba(255,255,255,0.75); font-size: var(--text-sm); line-height: 1.6; } .intl-tip strong { color: #fff; display: block; margin-bottom: 2px; font-size: var(--text-base, 15px); } /* --- Essential Info Cards (redesigned) --- */ .intl-essentials { margin-bottom: var(--spacing-2xl); } .intl-essentials-title { text-align: center; font-family: var(--font-serif); color: rgba(255,255,255,0.9); font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: var(--spacing-lg); letter-spacing: -0.01em; } .intl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } .intl-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: var(--spacing-xl); transition: all 0.3s ease; position: relative; overflow: hidden; } .intl-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-gold), transparent); opacity: 0; transition: opacity 0.3s; } .intl-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); border-color: rgba(200,152,46,0.2); } .intl-card:hover::before { opacity: 1; } .intl-card-number { font-family: var(--font-serif); font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: var(--weight-bold); color: rgba(200, 152, 46, 0.12); line-height: 1; position: absolute; top: 12px; right: 16px; pointer-events: none; } .intl-card-content { position: relative; } .intl-card-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.14); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); color: #fff; } .intl-card-icon svg { width: 24px; height: 24px; } .intl-card h4 { color: #fff; font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--spacing-sm); } .intl-card p { color: rgba(255,255,255,0.6); font-size: var(--text-sm); line-height: 1.7; } .intl-card a { color: #fff; text-decoration: none; font-weight: var(--weight-medium); } .intl-card a:hover { text-decoration: underline; } /* --- Testimonial --- */ .intl-testimonial { max-width: 720px; margin: 0 auto var(--spacing-2xl); text-align: center; } .intl-testimonial blockquote { position: relative; padding: var(--spacing-xl); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); border-left: 3px solid var(--color-gold); } .intl-quote-icon { width: 28px; height: 28px; color: #fff; opacity: 0.35; margin-bottom: var(--spacing-sm); } .intl-testimonial blockquote p { color: rgba(255,255,255,0.8); font-size: var(--text-base, 15px); line-height: 1.8; font-style: italic; margin-bottom: var(--spacing-md); } .intl-testimonial footer { display: flex; flex-direction: column; gap: 4px; } .intl-testimonial cite { color: #fff; font-style: normal; font-size: var(--text-sm); } .intl-testimonial footer span { color: rgba(255,255,255,0.45); font-size: var(--text-xs, 12px); } /* --- CTA --- */ .intl-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); } .intl-cta .btn { background: var(--color-gold); color: var(--color-dark); font-weight: var(--weight-semibold); padding: 14px 36px; font-size: var(--text-base, 15px); } .intl-cta .btn:hover { background: #d4a233; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(200, 152, 46, 0.3); } .intl-cta-secondary { color: rgba(255,255,255,0.5); font-size: var(--text-sm); text-decoration: none; transition: color 0.2s; } .intl-cta-secondary:hover { color: #fff; } /* --- Responsive --- */ @media (max-width: 1024px) { .intl-tab-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .intl-stats { gap: var(--spacing-md); padding: var(--spacing-md); } .intl-stat { min-width: 100px; } .intl-stat-divider { display: none; } .intl-tab-grid { grid-template-columns: 1fr; } .intl-cards { grid-template-columns: 1fr; } .intl-tab-nav { gap: 6px; } .intl-tab { padding: 8px 14px; font-size: 13px; } .intl-header-icon { width: 48px; height: 48px; } } /* Mobile lang-switcher in mobile menu */ .mobile-lang-section { padding: 0; border-top: 0; margin-top: 0; } .mobile-lang-section h4 { display: none; } .mobile-lang-options { display: flex; flex-wrap: wrap; gap: 8px; } .mobile-lang-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(15, 23, 42, 0.14); color: #0f172a; padding: 8px 12px; border-radius: var(--radius-full); font-size: 12px; font-family: var(--font-body); cursor: pointer; transition: all 0.15s; } .mobile-lang-btn:hover, .mobile-lang-btn.active { background: #0f172a; border-color: rgba(15, 23, 42, 0.7); color: #fff; } @media (max-width: 768px) { .lang-switcher { display: none; } .intl-cards { grid-template-columns: 1fr; } } /* ======================================== DARK MODE ======================================== */ /* Dark mode variables — activated by OS preference or manual toggle */ @media (prefers-color-scheme: dark) { :root:not(.light-mode) { --color-primary: #d4713a; --color-primary-hover: #e08a52; --color-dark: #0d0b09; --color-light: #121110; --color-cream: #1a1816; --color-surface: #1e1b18; --color-surface-alt: #252220; --color-rust: #c49455; --color-brown: #c49a6a; --color-slate: #e8ddd0; --color-earth: #a09282; --color-gold: #d4a83a; --color-indigo: #7ea8d8; --color-maroon: #c45a6a; --color-success: #45c97a; --color-warning: #e4a03c; --color-link: #7ea8d8; --color-text: #e0d6c8; --color-text-light: #a09282; --color-border: #3a352e; --color-white: #1a1816; --shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 38px rgba(0, 0, 0, 0.4); --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.5); color-scheme: dark; } } /* Manual dark mode toggle class */ :root.dark-mode { --color-primary: #d4713a; --color-primary-hover: #e08a52; --color-dark: #0d0b09; --color-light: #121110; --color-cream: #1a1816; --color-surface: #1e1b18; --color-surface-alt: #252220; --color-rust: #c49455; --color-brown: #c49a6a; --color-slate: #e8ddd0; --color-earth: #a09282; --color-gold: #d4a83a; --color-indigo: #7ea8d8; --color-maroon: #c45a6a; --color-success: #45c97a; --color-warning: #e4a03c; --color-link: #7ea8d8; --color-text: #e0d6c8; --color-text-light: #a09282; --color-border: #3a352e; --color-white: #1a1816; --shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 38px rgba(0, 0, 0, 0.4); --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* Dark mode body background override (remove light patterns) */ @media (prefers-color-scheme: dark) { :root:not(.light-mode) body { background-image: none; background-color: var(--color-light); } } :root.dark-mode body { background-image: none; background-color: var(--color-light); } /* --- Dark mode component overrides --- */ /* Mixin-like selectors for both auto and manual dark mode */ @media (prefers-color-scheme: dark) { :root:not(.light-mode) .navbar { background: #000; border-bottom-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } :root:not(.light-mode) .mobile-menu { background: #fff; border-left-color: rgba(15, 23, 42, 0.12); } :root:not(.light-mode) .mobile-menu-links li { border-bottom-color: rgba(15, 23, 42, 0.08); } :root:not(.light-mode) .mobile-menu-links a { color: #0f172a; } :root:not(.light-mode) .nav-link, :root:not(.light-mode) .hamburger-btn { color: #e8ecf6; } :root:not(.light-mode) .lang-btn { background: #161c2a; border-color: #2e3a50; color: #e8ecf6; } :root:not(.light-mode) .lang-dropdown { background: #111827; border-color: #2e3a50; } :root:not(.light-mode) .lang-option { color: #e8ecf6; } :root:not(.light-mode) .lang-option:hover, :root:not(.light-mode) .lang-option.active { background: #1b2436; } :root:not(.light-mode) .menu-icon { color: #0f172a; border-color: rgba(15, 23, 42, 0.12); background: #f8fafc; } :root:not(.light-mode) input, :root:not(.light-mode) textarea, :root:not(.light-mode) select { background: #252220; border-color: var(--color-border); color: var(--color-text); } :root:not(.light-mode) input::placeholder, :root:not(.light-mode) textarea::placeholder { color: rgba(224, 214, 200, 0.35); } :root:not(.light-mode) input:focus, :root:not(.light-mode) textarea:focus, :root:not(.light-mode) select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(212, 113, 58, 0.15); } /* Feature cards */ :root:not(.light-mode) .feature-card { background: #1e1b18; border-color: var(--color-border); } :root:not(.light-mode) .feature-icon { background: linear-gradient(135deg, rgba(126, 168, 216, 0.1), rgba(212, 168, 58, 0.12)); border-color: rgba(212, 168, 58, 0.2); } /* Itinerary cards */ :root:not(.light-mode) .itinerary-card { background: #1e1b18; border-color: var(--color-border); } :root:not(.light-mode) .card-label { background: #252220; } :root:not(.light-mode) .itinerary-card.free { background: linear-gradient(135deg, rgba(69, 201, 122, 0.04) 0%, rgba(69, 201, 122, 0.02) 100%); } /* Featured card */ :root:not(.light-mode) .featured-card { background: #1e1b18; border-color: var(--color-border); } /* FAQ */ :root:not(.light-mode) .faq-accordion .faq-item { background: #1e1b18; border-color: var(--color-border); } :root:not(.light-mode) .faq-item { background: #1e1b18; border-color: var(--color-border); } /* Promo cards */ :root:not(.light-mode) .promo-card { border-color: var(--color-border); } :root:not(.light-mode) .promo-primary { background: linear-gradient(135deg, rgba(212, 113, 58, 0.08) 0%, rgba(212, 168, 58, 0.05) 100%); } :root:not(.light-mode) .promo-secondary { background: linear-gradient(135deg, rgba(126, 168, 216, 0.06) 0%, rgba(126, 168, 216, 0.03) 100%); } /* Blog cards */ :root:not(.light-mode) .blog-post-card { background: #1e1b18; border-color: var(--color-border); } :root:not(.light-mode) .blog-preview__card { background: #1e1b18; border-color: var(--color-border); } /* Secondary button */ :root:not(.light-mode) .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--color-primary); border-color: rgba(212, 113, 58, 0.3); } :root:not(.light-mode) .btn-secondary:hover { background: rgba(212, 113, 58, 0.12); } /* Map section */ :root:not(.light-mode) .rj-section { background: linear-gradient(180deg, #121110 0%, #1a1614 50%, #1e1b18 100%); } :root:not(.light-mode) .rj-detail { background: #1e1b18; border-color: var(--color-border); } :root:not(.light-mode) .legend-card:hover, :root:not(.light-mode) .legend-card.active { background: #252220; } :root:not(.light-mode) .rj-detail-list li { background: #252220; border-color: var(--color-border); } /* Comparison table */ :root:not(.light-mode) .comparison-table { background: #1e1b18; } :root:not(.light-mode) .comparison-table td { border-bottom-color: var(--color-border); } :root:not(.light-mode) .comparison-table tbody tr:hover { background: rgba(212, 113, 58, 0.04); } /* Contact page */ :root:not(.light-mode) .contact-info, :root:not(.light-mode) .contact-form { background: #1e1b18; border-color: var(--color-border); } /* Legal pages */ :root:not(.light-mode) .legal-card { background: #1e1b18; border-color: var(--color-border); } /* Badge */ :root:not(.light-mode) .badge { background: rgba(126, 168, 216, 0.12); } /* Itinerary region divider */ :root:not(.light-mode) .itinerary-region-divider { background: #1e1b18; border-color: var(--color-border); } :root:not(.light-mode) .itinerary-region-divider p { background: #252220; border-color: rgba(255, 255, 255, 0.08); } /* Back to top */ :root:not(.light-mode) .back-to-top { background: var(--color-gold); color: #0d0b09; } /* Section backgrounds that use gradients with light vars */ :root:not(.light-mode) .promo-section { background: linear-gradient(180deg, #121110 0%, #252220 100%); } :root:not(.light-mode) .featured-section { background: linear-gradient(180deg, #252220 0%, #121110 100%); } /* Print override */ :root:not(.light-mode) .mobile-menu-overlay { background: rgba(0, 0, 0, 0.65); } /* Blog preview section */ :root:not(.light-mode) .blog-preview { background: #1e1b18; } } /* Manual toggle — duplicate the same overrides */ :root.dark-mode .navbar { background: #000; border-bottom-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } :root.dark-mode .mobile-menu { background: #fff; border-left-color: rgba(15, 23, 42, 0.12); } :root.dark-mode .mobile-menu-links li { border-bottom-color: rgba(15, 23, 42, 0.08); } :root.dark-mode .mobile-menu-links a { color: #0f172a; } :root.dark-mode .nav-link, :root.dark-mode .hamburger-btn { color: #e8ecf6; } :root.dark-mode .lang-btn { background: #161c2a; border-color: #2e3a50; color: #e8ecf6; } :root.dark-mode .lang-dropdown { background: #111827; border-color: #2e3a50; } :root.dark-mode .lang-option { color: #e8ecf6; } :root.dark-mode .lang-option:hover, :root.dark-mode .lang-option.active { background: #1b2436; } :root.dark-mode .menu-icon { color: #0f172a; border-color: rgba(15, 23, 42, 0.12); background: #f8fafc; } :root.dark-mode input, :root.dark-mode textarea, :root.dark-mode select { background: #252220; border-color: var(--color-border); color: var(--color-text); } :root.dark-mode input::placeholder, :root.dark-mode textarea::placeholder { color: rgba(224, 214, 200, 0.35); } :root.dark-mode input:focus, :root.dark-mode textarea:focus, :root.dark-mode select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(212, 113, 58, 0.15); } :root.dark-mode .feature-card { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .feature-icon { background: linear-gradient(135deg, rgba(126, 168, 216, 0.1), rgba(212, 168, 58, 0.12)); border-color: rgba(212, 168, 58, 0.2); } :root.dark-mode .itinerary-card { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .card-label { background: #252220; } :root.dark-mode .itinerary-card.free { background: linear-gradient(135deg, rgba(69, 201, 122, 0.04) 0%, rgba(69, 201, 122, 0.02) 100%); } :root.dark-mode .featured-card { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .faq-accordion .faq-item, :root.dark-mode .faq-item { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .promo-card { border-color: var(--color-border); } :root.dark-mode .promo-primary { background: linear-gradient(135deg, rgba(212, 113, 58, 0.08) 0%, rgba(212, 168, 58, 0.05) 100%); } :root.dark-mode .promo-secondary { background: linear-gradient(135deg, rgba(126, 168, 216, 0.06) 0%, rgba(126, 168, 216, 0.03) 100%); } :root.dark-mode .blog-post-card { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .blog-preview__card { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--color-primary); border-color: rgba(212, 113, 58, 0.3); } :root.dark-mode .btn-secondary:hover { background: rgba(212, 113, 58, 0.12); } :root.dark-mode .rj-section { background: linear-gradient(180deg, #121110 0%, #1a1614 50%, #1e1b18 100%); } :root.dark-mode .rj-detail { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .legend-card:hover, :root.dark-mode .legend-card.active { background: #252220; } :root.dark-mode .rj-detail-list li { background: #252220; border-color: var(--color-border); } :root.dark-mode .comparison-table { background: #1e1b18; } :root.dark-mode .comparison-table td { border-bottom-color: var(--color-border); } :root.dark-mode .comparison-table tbody tr:hover { background: rgba(212, 113, 58, 0.04); } :root.dark-mode .contact-info, :root.dark-mode .contact-form { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .legal-card { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .badge { background: rgba(126, 168, 216, 0.12); } :root.dark-mode .itinerary-region-divider { background: #1e1b18; border-color: var(--color-border); } :root.dark-mode .itinerary-region-divider p { background: #252220; border-color: rgba(255, 255, 255, 0.08); } :root.dark-mode .back-to-top { background: var(--color-gold); color: #0d0b09; } :root.dark-mode .promo-section { background: linear-gradient(180deg, #121110 0%, #252220 100%); } :root.dark-mode .featured-section { background: linear-gradient(180deg, #252220 0%, #121110 100%); } :root.dark-mode .mobile-menu-overlay { background: rgba(0, 0, 0, 0.65); } :root.dark-mode .blog-preview { background: #1e1b18; } /* --- Dark mode toggle button --- */ .dark-mode-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); cursor: pointer; margin-left: var(--spacing-sm); -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); padding: 0; font-size: 18px; line-height: 1; flex-shrink: 0; } .dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .dark-mode-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 2px; } .dark-mode-toggle .icon-sun, .dark-mode-toggle .icon-moon { display: none; } /* Show moon icon by default (light mode â†’ click to go dark) */ .dark-mode-toggle .icon-moon { display: block; } /* When dark mode is active, show sun icon instead */ @media (prefers-color-scheme: dark) { :root:not(.light-mode) .dark-mode-toggle .icon-moon { display: none; } :root:not(.light-mode) .dark-mode-toggle .icon-sun { display: block; } } :root.dark-mode .dark-mode-toggle .icon-moon { display: none; } :root.dark-mode .dark-mode-toggle .icon-sun { display: block; } /* For light mode forced on dark OS */ :root.light-mode .dark-mode-toggle .icon-sun { display: none; } :root.light-mode .dark-mode-toggle .icon-moon { display: block; } /* ======================================== MOBILE OPTIMIZATION — GLOBAL UTILITIES ======================================== */ /* Article container padding fix for blog/content pages */ .article-container { max-width: 900px; margin: 0 auto; padding: 32px; } @media (max-width: 768px) { .article-container { padding: 24px 16px; } } @media (max-width: 480px) { .article-container { padding: 20px 14px; } } /* Table responsive wrapper — prevents horizontal page overflow */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; } .table-responsive table { min-width: 400px; } /* Ensure all images are responsive by default */ article img, .article-container img { max-width: 100%; height: auto; } /* Prevent horizontal overflow globally */ html { overflow-x: hidden; } body { overflow-x: hidden; } /* ======================================== REDUCED MOTION — respect user preference ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ======================================== MOBILE PERFORMANCE OPTIMIZATIONS ======================================== */ @media (max-width: 768px) { /* Remove heavy body background patterns on mobile to reduce paint cost */ body { background-image: none; } /* Simplify hero slide transitions on mobile */ .hero-slide { transform: none; transition: opacity 0.6s ease; } .hero-slide.active { transform: none; } /* Simplify destination slide transitions on mobile */ .dest-slider__slide { transform: none; transition: opacity 0.8s ease; } .dest-slider__slide.active { transform: none; } /* Reduce reveal animation complexity */ .reveal-section { transform: none; transition: opacity 0.4s ease; } } /* ======================================== MOBILE-FIRST CONSOLIDATED LAYER (SAFE) Applies only to <=768px, desktop unchanged. ======================================== */ @media (max-width: 768px) { html { font-size: 15px; } body { line-height: 1.55; } .container, .navbar-container, .footer-container, .footer-bottom-inner, .article-container { width: min(100%, 100%); padding-left: 14px !important; padding-right: 14px !important; } section, .section, .hero, .featured-section, .promo-section, .blog-preview, .contact-section, .faq-section, .intl-banner { padding-top: clamp(28px, 6vw, 44px); padding-bottom: clamp(28px, 6vw, 44px); } h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.2; } h2 { font-size: clamp(1.45rem, 5.8vw, 1.95rem); line-height: 1.25; } h3 { font-size: clamp(1.15rem, 4.8vw, 1.45rem); } p, li, .section-subtitle, .card-description { font-size: 0.96rem; } .hero-actions, .card-footer, .cta-buttons { gap: 10px; } .hero-actions .btn, .hero-actions .btn-ghost, .card-footer .btn, .cta-section .btn, .intl-cta .btn, .btn-large { width: 100%; justify-content: center; min-height: 46px; } .btn, button, input, select, textarea, .nav-link, .mobile-menu-links a { min-height: 44px; } .grid, .cards-grid, .feature-grid, .blog-grid, .itinerary-grid, .comparison-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .feature-card, .promo-card, .blog-preview__card, .itinerary-card, .contact-card, .faq-item, .legal-card { border-radius: 14px; padding: 14px; } .navbar { height: 64px; } .navbar-container { height: 64px; } .logo-img { width: 168px; max-height: 56px; } .nav-links { display: none !important; } .mobile-menu { inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; border-left: 0 !important; } .mobile-menu-links a { padding: 12px 10px; } .footer-container { grid-template-columns: 1fr !important; gap: 18px; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; } .footer-bottom-links { flex-wrap: wrap; row-gap: 6px; } .newsletter-form { width: 100%; } .newsletter-form input[type="email"] { width: 100%; } .comparison-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } iframe, video, svg, img { max-width: 100%; height: auto; } } /* Header logo text (shared header) */ .navbar .navbar-container { padding-left: 10px; padding-right: 10px; } .navbar .logo { line-height: 1 !important; gap: 5px; margin: 0; padding: 0; background: transparent !important; } .navbar .logo-img { width: clamp(132px, 11vw, 162px); max-height: 42px; } .navbar .logo picture, .navbar .logo-img { background: transparent !important; border: 0; box-shadow: none; } .navbar .logo-name { display: inline-flex; align-items: center; white-space: nowrap; font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #f8fafc; text-shadow: none; opacity: 0.96; } @media (max-width: 1180px) { .navbar .logo-name { display: none; } } @media (max-width: 920px) { .navbar .navbar-container { padding-left: 2px; padding-right: 8px; } .navbar .logo { gap: 4px; margin-left: 0; } .navbar .logo-name { font-size: 9px; letter-spacing: 0.06em; } .navbar .logo-img { width: 150px; max-height: 40px; } } @media (max-width: 420px) { .navbar .navbar-container { padding-left: 0; padding-right: 6px; } .navbar .logo-name { font-size: 8px; letter-spacing: 0.05em; } } @media (max-width: 920px) { .navbar, :root.dark-mode .navbar, :root.light-mode .navbar { background: rgba(0, 0, 0, 0.48); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* Non-home pages: keep header solid dark on all viewports */ :root.hr-nonhome-page .navbar { background: #000 !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } @media (max-width: 920px) { :root.hr-nonhome-page .navbar { background: #000 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } } @media (max-width: 920px) { :root.hr-home-page .navbar { background: rgba(0, 0, 0, 0.3) !important; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; } :root.hr-home-page .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(26, 18, 11, 0.78) 80%) !important; } :root.hr-home-page .hero.hero-photo { margin-top: -64px !important; padding-top: 128px !important; min-height: 100svh !important; height: 100svh !important; max-height: none !important; } :root.hr-home-page .navbar-container, :root.hr-nonhome-page .navbar-container { max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 8px !important; } :root.hr-home-page .logo, :root.hr-nonhome-page .logo { margin-left: 0 !important; padding-left: 0 !important; } :root.hr-home-page .logo-img, :root.hr-nonhome-page .logo-img { margin-left: -8px !important; } } @media (min-width: 921px) { .navbar .logo { gap: 10px; } .navbar .logo-img { width: clamp(164px, 13vw, 198px); max-height: 50px; } .navbar .logo-name { display: inline-flex; font-size: 12px; letter-spacing: 0.1em; opacity: 1; } } /* Home page visual cleanup: crisper text + modern button system */ :root.hr-home-page .hero-content, :root.hr-home-page .hero h1, :root.hr-home-page .hero-subtitle, :root.hr-home-page .hero-badge { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } :root.hr-home-page .hero-content { animation: none; transform: none; } :root.hr-home-page .hero h1, :root.hr-home-page .hero-subtitle { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24); } :root.hr-home-page .hero-badge { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.24); backdrop-filter: none; -webkit-backdrop-filter: none; } :root.hr-home-page .btn { border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; } :root.hr-home-page .btn-primary, :root.hr-home-page .btn-glow { background: rgba(0, 0, 0, 0.9); border-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); animation: none; } :root.hr-home-page .btn-primary::before { display: none; } :root.hr-home-page .btn-primary:hover, :root.hr-home-page .btn-glow:hover { background: #000; border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); } :root.hr-home-page .btn-ghost, :root.hr-home-page .btn-secondary { background: rgba(0, 0, 0, 0.36); color: #fff; border-color: rgba(255, 255, 255, 0.28); backdrop-filter: none; -webkit-backdrop-filter: none; } :root.hr-home-page .btn-ghost:hover, :root.hr-home-page .btn-secondary:hover { background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.4); } /* Home nav + section labels readability */ :root.hr-home-page .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; } :root.hr-home-page .nav-link { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); background: rgba(0, 0, 0, 0.16); border-color: rgba(255, 255, 255, 0.16); } :root.hr-home-page .nav-link:hover, :root.hr-home-page .nav-link.active { color: #fff; background: rgba(0, 0, 0, 0.34); border-color: rgba(255, 255, 255, 0.3); } :root.hr-home-page .section-label { color: #fff; background: rgba(0, 0, 0, 0.56); border-color: rgba(255, 255, 255, 0.28); text-shadow: none; } /* Mobile drawer links: clean white modern cards */ @media (max-width: 920px) { .mobile-menu { background: #ffffff !important; } .mobile-menu-links li { border-bottom: 0 !important; } .mobile-menu-links a { margin: 4px 8px !important; padding: 12px 12px !important; border-radius: 12px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important; } .mobile-menu-links a:hover, .mobile-menu-links a:active { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.16) !important; color: #020617 !important; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important; } .mobile-menu-links a.active { background: #ffffff !important; border-left: 1px solid rgba(15, 23, 42, 0.22) !important; border-color: rgba(15, 23, 42, 0.22) !important; color: #020617 !important; } .menu-icon { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; color: #0f172a !important; } } /* ======================================== BLOG ARTICLE SYSTEM (UNIFIED) ======================================== */ .article-intro, .article-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(15, 23, 42, 0.12); } .article-hero .container { max-width: 980px; } .article-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: var(--spacing-sm); } .article-hero .hero-subtitle { margin: 0; max-width: 760px; color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; } .article-container { max-width: 900px; margin: 24px auto 48px; padding: clamp(18px, 3vw, 30px); background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 16px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06); } .article-container h2, .article-container h3 { color: var(--color-indigo); letter-spacing: -0.01em; } .article-container h2 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: clamp(1.3rem, 2.2vw, 1.85rem); } .article-container h3 { margin-top: 1.2rem; margin-bottom: 0.5rem; font-size: clamp(1.08rem, 1.8vw, 1.35rem); } .article-container p, .article-container li { color: #334155; line-height: 1.8; font-size: 1rem; } .article-container ul, .article-container ol { margin: 0.4rem 0 1.15rem; padding-left: 1.2rem; } .article-container li { margin-bottom: 0.5rem; } .article-container a { color: #1d4ed8; text-underline-offset: 2px; } .article-container a:hover { color: #1e40af; } .article-container blockquote { margin: 1.15rem 0; padding: 0.9rem 1rem; border-left: 3px solid var(--color-gold); background: #f8fafc; border-radius: 10px; color: #334155; } .article-container .post-img, .article-container img.post-img { width: 100%; border-radius: 12px; border: 1px solid rgba(15, 23, 42, 0.09); margin: 1.2rem 0 0.55rem; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } .article-container .post-img-caption { margin-top: 0; margin-bottom: 1.2rem; color: #64748b; text-align: center; font-size: 0.86rem; } @media (max-width: 768px) { .article-container { margin: 14px auto 28px; border-radius: 12px; } .article-container p, .article-container li { font-size: 0.98rem; line-height: 1.72; } } @media (prefers-color-scheme: dark) { :root:not(.light-mode) .article-container { background: #171513; border-color: var(--color-border); box-shadow: none; } :root:not(.light-mode) .article-container p, :root:not(.light-mode) .article-container li, :root:not(.light-mode) .article-container blockquote { color: var(--color-text); } :root:not(.light-mode) .article-container blockquote { background: rgba(126, 168, 216, 0.08); } } :root.dark-mode .article-container { background: #171513; border-color: var(--color-border); box-shadow: none; } :root.dark-mode .article-container p, :root.dark-mode .article-container li, :root.dark-mode .article-container blockquote { color: var(--color-text); } :root.dark-mode .article-container blockquote { background: rgba(126, 168, 216, 0.08); } /* Blog subpages: remove visual hero treatment and keep clean article-first layout */ .article-hero { background: transparent !important; color: var(--ui-ink, #0f172a) !important; padding: 18px 20px 0 !important; border: 0 !important; overflow: visible !important; } .article-intro::before, .article-intro::after, .article-hero::before, .article-hero::after { display: none !important; content: none !important; } .article-intro .container, .article-hero .container { max-width: 900px; margin: 0 auto; padding: 0; } .article-intro h1, .article-hero h1 { margin: 0; color: var(--ui-ink, #0f172a) !important; } .article-intro .hero-subtitle, .article-hero .hero-subtitle { margin-top: 10px; color: var(--ui-muted, #475569) !important; max-width: 760px; font-size: 0.98rem; line-height: 1.7; } .article-cover { margin: 16px auto 0 !important; } .article-body, .visa-article { max-width: 900px; margin: 18px auto 48px !important; padding: clamp(18px, 3vw, 30px) !important; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 16px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06); } .article-body h2, .article-body h3, .visa-article h2, .visa-article h3 { color: var(--color-indigo, #1d3461); } @media (max-width: 768px) { .article-intro, .article-hero { padding: 14px 16px 0 !important; } .article-body, .visa-article { margin: 14px auto 28px !important; border-radius: 12px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } } @media (prefers-color-scheme: dark) { :root:not(.light-mode) .article-body, :root:not(.light-mode) .visa-article { background: #171513; border-color: var(--color-border); box-shadow: none; } } :root.dark-mode .article-body, :root.dark-mode .visa-article { background: #171513; border-color: var(--color-border); box-shadow: none; } /* ========================================================= Webapp Polish Layer (2026-03) Monochrome-first + subtle electric-blue accent ========================================================= */ :root { --ui-ink: #0f172a; --ui-muted: #475569; --ui-border: #e2e8f0; --ui-surface: #ffffff; --ui-surface-soft: #f8fafc; --ui-accent: #2563ff; --ui-accent-soft: #eff6ff; } body { background: #ffffff !important; color: var(--ui-ink) !important; } main, section, .card, .feature-card, .destination-card, .blog-card, .itinerary-card, .faq-item { background: var(--ui-surface); border-color: var(--ui-border); } h1, h2, h3, h4, h5, h6 { color: #0b1220; } p, li, .section-subtitle, .card-description, .meta, .muted { color: var(--ui-muted); } a:hover, a:focus-visible { color: var(--ui-accent) !important; } .btn-primary, .btn.btn-primary { background: #0a0a0a !important; border-color: #0a0a0a !important; color: #ffffff !important; } .btn-primary:hover, .btn.btn-primary:hover { background: #1f2937 !important; border-color: #1f2937 !important; } .btn-secondary, .btn-gold, .btn-ghost, .filter-btn, .currency-switch__btn, .clear-filters-btn { background: #ffffff !important; color: #111827 !important; border: 1px solid var(--ui-border) !important; } .filter-btn.active, .currency-switch__btn.active, .intl-tab.active { color: var(--ui-accent) !important; border-color: #bfdbfe !important; background: var(--ui-accent-soft) !important; } input:focus, select:focus, textarea:focus, button:focus-visible, .btn:focus-visible, .filter-btn:focus-visible, .currency-switch__btn:focus-visible, .intl-tab:focus-visible { outline: none !important; border-color: #93c5fd !important; box-shadow: 0 0 0 3px rgba(37,99,255,.14) !important; } /* Footer visibility and professional layout */ .footer, .site-footer { background: #ffffff !important; color: #0f172a !important; border-top: 1px solid var(--ui-border); } .footer::before, .site-footer::before { height: 2px !important; background: linear-gradient(90deg, #0f172a 0%, #2563ff 35%, #0f172a 100%) !important; } .footer-section, .footer-brand, .footer-newsletter { background: transparent !important; border-color: var(--ui-border) !important; } .footer-brand p, .footer-section p, .footer-section li, .footer-contact-list li, .footer-bottom, .footer-bottom-links a, .footer-payments .pay-badge, .footer-payments .pay-logo.visa .brand, .footer-payments .pay-logo.mc .brand, .footer-payments .pay-logo.amex .brand, .footer-payments .pay-logo.upi .brand { color: #475569 !important; } .footer-section h3, .footer-newsletter h4, .footer-section a, .footer-section a:hover, .footer-bottom-links a:hover { color: #0f172a !important; } .footer-contact-icon, .footer-payments .pay-badge svg, .social-link svg { stroke: #334155 !important; } .social-link { background: #ffffff !important; border: 1px solid var(--ui-border) !important; color: #334155 !important; } .social-link:hover { transform: translateY(-1px); border-color: #cbd5e1 !important; } .newsletter-form input[type="email"] { background: #ffffff !important; color: #0f172a !important; border: 1px solid #d1d5db !important; } .newsletter-form input[type="email"]::placeholder { color: #6b7280 !important; } .newsletter-form button { background: #0a0a0a !important; border: 1px solid #0a0a0a !important; color: #ffffff !important; } .newsletter-form button:hover { background: #1f2937 !important; box-shadow: none !important; } /* Tabs: desktop + touch polish */ .intl-tab-nav { gap: 8px; } .intl-tab { min-height: 38px; border-radius: 999px; border-color: #dbe2ea; background: #ffffff; color: #334155; } .intl-tab:hover { border-color: #bfdbfe; background: #f8fbff; color: #1e3a8a; } /* Header Black Lock (2026-03) */ .navbar, .navbar.navbar-scrolled { background: #000000 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26) !important; } .nav-link { color: rgba(255, 255, 255, 0.86) !important; } .nav-link:hover, .nav-link.active { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Header Opaque Final Lock (2026-03) */ .navbar, .navbar.navbar-scrolled, :root.hr-home-page .navbar, :root.hr-nonhome-page .navbar { background: #000000 !important; background-color: #000000 !important; background-image: none !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }