/* ===================================================== LayoverX - Professional Travel Platform Design System Production-ready, mobile-first, fully responsive ===================================================== */ /* ===== CRITICAL CSS (Inline in ) ===== */ :root { --primary: #0ea5e9; --primary-dark: #0284c7; --primary-light: #38bdf8; --secondary: #0f172a; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --surface: #f8fafc; --border: #e2e8f0; /* Contrast Tokens */ --text: #111827; --text-muted: #374151; /* WCAG AA Contrast Update */ --text-primary: #111827; --text-secondary: #374151; --text-on-dark: #f9fafb; --text-on-light: #111827; --heading-color: #0f172a; --body-color: #1f2937; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow: 0 4px 6px -1px rgba(0,0,0,.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1); --radius: 0.75rem; --radius-lg: 1rem; --transition: all .2s cubic-bezier(.4,0,.2,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--body-color);background:var(--surface);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1, h2, h3, h4, h5, h6 { color: inherit; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none} input,select,textarea{font-family:inherit;color:var(--text-primary)} ul{list-style:none} /* FOUC Prevention */ .sr-only:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} .sr-only:focus{position:absolute;top:1rem;left:1rem;z-index:1001;background-color:#fff;color:#111827;padding:.5rem 1rem;border-radius:.5rem;outline:none} .w-9{width:2.25rem}.h-9{height:2.25rem}.w-5{width:1.25rem}.h-5{height:1.25rem} .w-6{width:1.5rem}.h-6{height:1.5rem} svg{max-width:100%;height:auto} @media (min-width: 1024px) { .lg\:hidden { display: none !important; } .lg\:flex { display: flex !important; } } /* Container */ .container{width:100%;max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem} @media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}} @media(min-width:1024px){.container{padding-left:2rem;padding-right:2rem}} /* Section spacing */ .section{padding-top:4rem;padding-bottom:4rem} @media(min-width:768px){.section{padding-top:5rem;padding-bottom:5rem}} @media(min-width:1024px){.section{padding-top:6rem;padding-bottom:6rem}} /* Cards */ .card{background:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} /* Reveal - NO_FCP FIX */ .reveal{opacity:1;transform:translateY(0);transition:opacity .5s,transform .5s} .reveal.animate{opacity:0;transform:translateY(16px)} .reveal.animate.visible{opacity:1;transform:translateY(0)} /* Forms */ input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.12)} input[type="datetime-local"],input[type="date"]{appearance:none;-webkit-appearance:none} /* Button */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;border-radius:var(--radius);transition:var(--transition);white-space:nowrap} .btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(14,165,233,.3)} .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,165,233,.4)} .btn-secondary{background:#fff;color:var(--primary);border:2px solid var(--primary)} .btn-secondary:hover{background:var(--primary);color:#fff} .btn-ghost{background:transparent;color:var(--text)} .btn-ghost:hover{background:var(--surface)} /* Modal overlay */ .modal-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem} .modal-overlay.flex{display:flex} .modal-content{background:#fff;border-radius:1.5rem;box-shadow:var(--shadow-xl);width:100%;max-width:28rem;max-height:90vh;overflow-y:auto;position:relative} .modal-close{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--text-muted);transition:var(--transition)} .modal-close:hover{background:var(--surface);color:var(--text)} /* Auth form */ .auth-form{display:flex;flex-direction:column;gap:1.25rem;padding:2rem} .auth-form h2{font-size:1.5rem;font-weight:700;text-align:center} .auth-form p{text-align:center;color:var(--text-muted);font-size:.875rem} .form-group{display:flex;flex-direction:column;gap:.375rem} .form-label{font-size:.875rem;font-weight:500;color:var(--text)} .form-input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;transition:var(--transition)} .form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.12)} .form-checkbox{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-muted)} .auth-link{color:var(--primary);font-weight:600;cursor:pointer} .auth-link:hover{text-decoration:underline} .divider{display:flex;align-items:center;gap:1rem;color:var(--text-muted);font-size:.875rem;margin:1rem 0} .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)} .social-btn{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:var(--transition)} .social-btn:hover{background:var(--surface)} /* User dropdown */ .user-menu{position:relative} .user-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--border);min-width:12rem;padding:.5rem;display:none;z-index:50} .user-dropdown.show{display:block} .user-dropdown a{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;font-size:.875rem;color:var(--text);border-radius:.5rem;transition:var(--transition)} .user-dropdown a:hover{background:var(--surface)} .user-dropdown .divider{margin:.375rem 0;height:1px;background:var(--border)} /* Search tab */ .search-tab{transition:all .2s;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.75rem;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;border:2px solid transparent} .search-tab.active{background:var(--primary);color:#fff;box-shadow:0 4px 8px rgba(14,165,233,.25)} .search-tab:not(.active){color:var(--text-muted)} .search-tab:not(.active):hover{background:var(--surface);color:var(--text)} /* Navbar */ #navbar{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--transition)} #navbar .nav-link{color:rgba(255,255,255,.95);transition:color .3s ease} #navbar .nav-link:hover,#navbar .nav-link:focus{color:#fff} #navbar:not(.scrolled) #logo-text{color:#fff} #navbar.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm)} #navbar.scrolled .nav-link{color:var(--text-primary)} #navbar.scrolled .nav-link:hover,#navbar.scrolled .nav-link:focus{color:var(--primary)} #navbar.scrolled #logo-text{color:var(--text-primary)} #navbar.scrolled #menu-btn{color:var(--text-primary)} #navbar.scrolled #menu-btn:hover{background:rgba(0,0,0,0.05)} #navbar:not(.scrolled) #menu-btn{color:#fff} #navbar:not(.scrolled) #menu-btn:hover{background:rgba(255,255,255,0.1)} /* Scrolled vs Not Scrolled for actions */ #navbar:not(.scrolled) #user-menu-btn { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.25) !important; background-color: rgba(255, 255, 255, 0.1) !important; } #navbar:not(.scrolled) #user-menu-btn:hover { background-color: rgba(255, 255, 255, 0.2) !important; } #navbar.scrolled #user-menu-btn { color: #0f172a !important; border-color: #cbd5e1 !important; background-color: #f8fafc !important; } #navbar.scrolled #user-menu-btn:hover { background-color: #f1f5f9 !important; } #navbar:not(.scrolled) #global-trip-badge { color: #38bdf8 !important; border-color: rgba(56, 189, 248, 0.3) !important; background-color: rgba(14, 165, 233, 0.15) !important; } #navbar:not(.scrolled) #global-trip-badge:hover { background-color: rgba(14, 165, 233, 0.3) !important; } #navbar.scrolled #global-trip-badge { color: #0284c7 !important; border-color: #bae6fd !important; background-color: #f0f9ff !important; } #navbar.scrolled #global-trip-badge:hover { background-color: #e0f2fe !important; } /* Mobile menu */ #mobile-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:1rem;box-shadow:var(--shadow-lg);margin:0 1rem;padding:.75rem;display:none} #mobile-menu:not(.hidden){display:block} #mobile-menu a{color:#1e293b !important} #mobile-menu a:hover{color:var(--primary) !important} /* Sticky bottom CTA removed */ /* Carousel Utilities */ .carousel-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .carousel-container::-webkit-scrollbar { display: none; } .carousel-item { flex: 0 0 100%; scroll-snap-align: center; } @media (min-width: 768px) { .carousel-item { flex: 0 0 50%; } } @media (min-width: 1024px) { .carousel-item { flex: 0 0 33.333333%; } } .carousel-nav-btn { width: 3rem; height: 3rem; border-radius: 9999px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); border: 1px solid var(--border); transition: var(--transition); z-index: 10; } .carousel-nav-btn:hover { background: var(--surface); transform: scale(1.1); color: var(--primary); } .carousel-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Image States */ .loading-image { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .image-fallback { object-fit: cover; filter: sepia(0.2) brightness(0.9); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Theme Engine */ .theme-hotels { --primary: #c5a059; --primary-dark: #a68143; --primary-light: #e4cc95; --secondary: #0f172a; --theme-hero-from: #0f172a; --theme-hero-to: #1e293b; } .theme-restaurants { --primary: #f97316; --primary-dark: #ea580c; --primary-light: #fb923c; --secondary: #991b1b; --theme-hero-from: #7c2d12; --theme-hero-to: #450a0a; } .theme-spa { --primary: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #a78bfa; --secondary: #0891b2; --theme-hero-from: #2e1065; --theme-hero-to: #1e1b4b; } .theme-gaming { --primary: #d946ef; --primary-dark: #c026d3; --primary-light: #f5d0fe; --secondary: #22d3ee; --theme-hero-from: #4a044e; --theme-hero-to: #1e1b4b; } .theme-tours { --primary: #f43f5e; --primary-dark: #e11d48; --primary-light: #fb7185; --secondary: #0ea5e9; --theme-hero-from: #881337; --theme-hero-to: #4c0519; } .theme-transfers { --primary: #475569; --primary-dark: #1e293b; --primary-light: #94a3b8; --secondary: #334155; --theme-hero-from: #0f172a; --theme-hero-to: #334155; } /* Apply Theme Hero Backgrounds */ .theme-hero { background: linear-gradient(to bottom right, var(--theme-hero-from), var(--theme-hero-to)) !important; } .theme-text-accent { background: linear-gradient(to right, var(--primary), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .theme-badge { background: rgba(255,255,255,0.1) !important; color: var(--primary-light) !important; border: 1px solid rgba(255,255,255,0.2) !important; } /* Theme Utilities */ .bg-theme-primary { background-color: var(--primary) !important; } .hover\:bg-theme-primary:hover { background-color: var(--primary-dark) !important; } .text-theme-primary { color: var(--primary) !important; } .border-theme-primary { border-color: var(--primary) !important; } .text-theme-accent { color: var(--primary-light) !important; } /* Modal Animations */ .modal-overlay.opacity-100 { opacity: 1; } .modal-overlay .modal-content.scale-100 { transform: scale(1); } /* Improved Toasts (Booking/Airbnb style) */ #toast-container { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; background: #fff; color: #111827; padding: 1rem 1.25rem; border-radius: 9999px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; font-size: 0.875rem; font-weight: 600; opacity: 0; transform: translateY(-1rem) scale(0.95); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .toast.toast-show { opacity: 1; transform: translateY(0) scale(1); } .toast-success .toast-icon { color: #10b981; } .toast-error .toast-icon { color: #ef4444; } .toast-info .toast-icon { color: #3b82f6; } /* Custom Tailwind Accent Overrides */ .text-gray-650 { color: #4b5563 !important; } .bg-gray-55 { background-color: #f1f5f9 !important; } .bg-emerald-650 { background-color: #059669 !important; } .bg-emerald-650:hover { background-color: #047857 !important; } .bg-amber-650 { background-color: #d97706 !important; } .bg-amber-650:hover { background-color: #b45309 !important; } /* Dynamic Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Hide scrollbar helper */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Custom selector states */ .select-card { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .select-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); } input[type="checkbox"]:checked + div h3, input[type="radio"]:checked + div h3 { color: var(--primary) !important; } /* Active Nav Link Custom Styling */ .active-nav-link { color: #0284c7 !important; /* Sky 600 */ font-weight: 600 !important; border-bottom: 2px solid #0284c7; } .plan-my-layover-btn { display: inline-block; text-align: center; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.75rem; transition: all .2s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-sm); } .plan-my-layover-btn:hover { transform: translateY(-2px); } /* Default state on transparent navbar */ #navbar:not(.scrolled) .plan-my-layover-btn:not(.active) { background: #ffffff; color: #0284c7; } #navbar:not(.scrolled) .plan-my-layover-btn:not(.active):hover { background: #f0f9ff; color: #0369a1; } /* Default state on scrolled white navbar */ #navbar.scrolled .plan-my-layover-btn:not(.active) { background: transparent; color: #0284c7; border: 1.5px solid #0284c7; } #navbar.scrolled .plan-my-layover-btn:not(.active):hover { background: #0284c7; color: #ffffff; } /* Active page solid contrast style */ .plan-my-layover-btn.active { background: #0284c7; color: #ffffff; border: 1.5px solid #0284c7; } .plan-my-layover-btn.active:hover { background: #0369a1; border-color: #0369a1; }