/* ============================================================================ THEME SELECTION (set exactly one to true) ---------------------------------------------------------------------------- Options: --use-theme-default: light white/green/black professional theme --use-theme-mint: calm mint + soft blue theme --use-theme-sand: sand & ocean (warm neutrals + teal) theme Example: :root { --use-theme-default: true; --use-theme-mint: false; --use-theme-sand: false; } ============================================================================ */ :root { --use-theme-default: true; /* true | false */ --use-theme-mint: false; /* true | false */ --use-theme-sand: false; /* true | false */ } /* ============================================================================ BASE THEME (Default - Light White, Green & Black Professional) ============================================================================ */ /* Design System Variables - Clean & Professional */ :root { /* Light Professional Colors - White, Green, Black */ --color-primary: #1a1a1a; /* Soft black for text */ --color-secondary: #16a34a; /* Clean green - professional & trustworthy */ --color-accent: #22c55e; /* Bright green - call-to-action */ --color-text: #1a1a1a; /* Soft black */ --color-text-secondary: #6b7280; /* Light gray for secondary text */ --color-background: #ffffff; /* Pure white background */ --color-surface: #ffffff; /* White surface */ --color-bg-1: #f9fafb; /* Very light gray */ --color-bg-2: #f3f4f6; /* Light gray */ --color-bg-3: #e5e7eb; /* Medium light gray */ --color-bg-5: #f0fdf4; /* Very light green tint */ --color-border: #e5e7eb; /* Light gray border */ --color-card-border: #d1d5db; /* Medium gray border */ /* Spacing */ --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; /* Typography */ --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Border Radius */ --radius-base: 0.375rem; --radius-lg: 0.5rem; --radius-full: 9999px; /* Shadows - Modern & Subtle */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Transitions */ --duration-fast: 150ms; --duration-normal: 300ms; --ease-standard: ease; /* Container */ --container-max-width: 1200px; } /* Container */ .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-16); } /* Clean Professional Taxi Brand Colors */ :root { --taxi-primary: #1a1a1a; /* Soft black - professional */ --taxi-secondary: #16a34a; /* Clean green - trust & reliability */ --taxi-accent: #22c55e; /* Bright green - success & call-to-action */ --taxi-warning: #f59e0b; /* Amber for highlights */ --taxi-dark: #111827; /* Deep black */ --taxi-light: #ffffff; /* Pure white */ } /* Additional styles for the taxi booking website */ /* Override some design system defaults for the taxi theme */ :root { --taxi-orange: #f97316; /* Clean orange */ --taxi-green: #22c55e; /* Bright green */ --taxi-yellow: #eab308; /* Clean yellow */ --taxi-dark: #1a1a1a; /* Soft black */ } /* ============================================================================ THEME: Calm Mint (peaceful greens + soft blues) Apply by setting data-theme="mint" on or via the small helper script ============================================================================ */ :root[data-theme="mint"] { --color-primary: #0f766e; /* Teal 700 */ --color-secondary: #60a5fa; /* Blue 400 */ --color-accent: #34d399; /* Emerald 400 */ --color-text: #0f172a; /* Slate 900 */ --color-text-secondary: #475569; /* Slate 600 */ --color-background: #f8fafc; /* Slate 50 */ --color-surface: #ffffff; --color-bg-1: #f1f5f9; /* Slate 100 */ --color-bg-2: #e2e8f0; /* Slate 200 */ --color-bg-3: #e2e8f0; /* Slate 200 */ --color-bg-5: #f0fdfa; /* Teal 50 */ --color-border: #e2e8f0; /* Slate 200 */ --color-card-border: #cbd5e1; /* Slate 300 */ --taxi-primary: #0f766e; /* Teal */ --taxi-secondary: #60a5fa; /* Soft blue */ --taxi-accent: #34d399; /* Mint */ --taxi-warning: #f59e0b; /* Amber */ --taxi-dark: #0b2f2b; /* Deep teal */ --taxi-light: #ecfeff; /* Cyan 50 */ --taxi-orange: #fb923c; /* Softer orange */ --taxi-green: #34d399; /* Mint */ --taxi-yellow: #fde68a; /* Warm yellow */ } /* ============================================================================ THEME: Sand & Ocean (warm neutrals + teal accent) Apply by setting data-theme="sand" on or via the small helper script ============================================================================ */ :root[data-theme="sand"] { --color-primary: #134e4a; /* Teal 900 */ --color-secondary: #0284c7; /* Sky 600 */ --color-accent: #14b8a6; /* Teal 500 */ --color-text: #1f2937; /* Gray 800 */ --color-text-secondary: #4b5563; /* Gray 600 */ --color-background: #f8f5f2; /* Warm sand */ --color-surface: #ffffff; --color-bg-1: #f5f2ef; /* Light sand */ --color-bg-2: #efeae6; /* Deeper sand */ --color-bg-3: #e7e2dd; /* Border sand */ --color-bg-5: #f1f5f9; /* Neutral light */ --color-border: #e5e7eb; /* Neutral border */ --color-card-border: #e5ded6; /* Sand border */ --taxi-primary: #134e4a; /* Deep ocean teal */ --taxi-secondary: #0ea5e9; /* Sky 500 */ --taxi-accent: #14b8a6; /* Teal */ --taxi-warning: #f59e0b; /* Amber */ --taxi-dark: #1f2937; /* Neutral dark */ --taxi-light: #fafaf9; /* Warm light */ --taxi-orange: #ea580c; /* Burnt orange */ --taxi-green: #16a34a; /* Green 600 */ --taxi-yellow: #fbbf24; /* Amber 400 */ } /* ============================================================================ SMALL RUNTIME HELPER: data-theme auto-apply based on toggles above - index.html and city pages include a tiny script to read the three toggles and set accordingly at runtime. - No changes are made to header/footer files. ============================================================================ */ /* Global overrides */ body { font-family: Arial, sans-serif; background-color: var(--color-background); margin: 0; padding: 0; line-height: var(--line-height-normal); } /* Add some top margin to main content to account for sticky header */ main { margin-top: var(--space-16); } /* Ensure proper spacing for city pages */ #city-page { padding-top: var(--space-16); } /* Header styles */ .header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-16) 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } .header-content { display: flex; align-items: center; justify-content: space-between; } .logo h2 { color: var(--taxi-primary); margin: 0; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); background: linear-gradient(135deg, var(--taxi-primary) 0%, var(--taxi-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav { display: flex; align-items: center; gap: var(--space-24); } .nav-link { color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium); padding: var(--space-8) var(--space-12); border-radius: var(--radius-base); transition: all var(--duration-fast) var(--ease-standard); } .nav-link:hover, .nav-link.active { background-color: var(--color-bg-1); color: var(--color-primary); } .mobile-menu-toggle { display: none; background: none; border: none; font-size: var(--font-size-2xl); cursor: pointer; color: var(--color-text); } /* Page system */ .page { display: none; } .page.active { display: block; } /* Hero section */ .hero { background: linear-gradient(135deg, var(--taxi-light) 0%, var(--color-bg-1) 100%); color: var(--color-text); padding: var(--space-32) 0; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; right: 0; width: 600px; height: 600px; background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%); border-radius: 50%; transform: translate(30%, -30%); } .hero-content h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-16); color: var(--color-text); position: relative; z-index: 2; } .hero-content p { font-size: var(--font-size-xl); margin-bottom: var(--space-24); color: var(--color-text-secondary); position: relative; z-index: 2; } .hero .btn--primary { background: var(--taxi-accent); color: white; border: none; padding: var(--space-12) var(--space-24); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); border-radius: var(--radius-lg); transition: all var(--duration-normal) var(--ease-standard); box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.4); } .hero .btn--primary:hover { background: var(--taxi-secondary); transform: translateY(-1px); box-shadow: 0 6px 20px 0 rgba(34, 197, 94, 0.4); } /* Sections */ section { padding: var(--space-32) 0; } section h2 { text-align: center; margin-bottom: var(--space-32); color: var(--color-text); } /* Services grid */ .services { background: var(--color-bg-1); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-24); } .service-card { text-align: center; padding: var(--space-24); border-radius: var(--radius-lg); transition: transform var(--duration-normal) var(--ease-standard); } .service-card:hover { transform: translateY(-4px); } .service-icon { font-size: 3rem; margin-bottom: var(--space-16); } .service-card h3 { color: var(--taxi-primary); margin-bottom: var(--space-12); } /* Cities grid */ .cities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-24); } .city-card { cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); overflow: hidden; border-radius: var(--radius-lg); } .city-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .city-card img { width: 100%; height: 200px; object-fit: cover; } .city-info { padding: var(--space-16); } .city-info h3 { color: var(--taxi-primary); margin-bottom: var(--space-8); } /* Routes grid */ .routes { background: var(--color-bg-3); } .routes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-24); } .route-card { padding: var(--space-20); text-align: center; cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); border-radius: var(--radius-lg); } .route-card:hover { transform: translateY(-4px); background: linear-gradient(135deg, var(--taxi-primary) 0%, var(--taxi-secondary) 100%); color: white; } .route-card h3 { color: var(--taxi-primary); margin-bottom: var(--space-8); } .route-price { background: var(--taxi-accent); color: white; padding: var(--space-8) var(--space-16); border-radius: var(--radius-full); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); display: inline-block; margin-top: var(--space-12); } /* How it works */ .how-it-works { background: var(--color-bg-5); } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-24); } .step-card { text-align: center; padding: var(--space-24); } .step-number { width: 60px; height: 60px; background: var(--taxi-accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0 auto var(--space-16); box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.3); } .step-card h3 { color: var(--taxi-primary); margin-bottom: var(--space-12); } /* City page styles */ .city-header { text-align: center; padding: var(--space-32) 0; background: linear-gradient(135deg, var(--color-bg-2) 0%, var(--taxi-secondary) 100%); color: var(--taxi-primary); margin-bottom: var(--space-32); border-radius: var(--radius-lg); margin: 0 0 var(--space-32) 0; position: relative; overflow: hidden; } .city-header::before { content: ''; position: absolute; top: 0; right: 0; width: 400px; height: 400px; background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%); border-radius: 50%; transform: translate(30%, -30%); } .city-header h1 { color: var(--taxi-primary); margin-bottom: var(--space-16); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); position: relative; z-index: 2; } .city-header p { color: var(--color-text-secondary); font-size: var(--font-size-lg); margin: 0; position: relative; z-index: 2; } .packages-section { margin-bottom: var(--space-32); padding: 0 var(--space-16); } .packages-section h2 { color: var(--taxi-primary); text-align: left; margin-bottom: var(--space-24); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); } /* Pricing table */ .pricing-table { overflow-x: auto; margin-bottom: var(--space-24); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--font-size-base); margin: 0; } .table th, .table td { padding: var(--space-16) var(--space-12); text-align: center; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .table th { background: linear-gradient(135deg, var(--taxi-secondary) 0%, var(--taxi-accent) 100%); color: white; font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); text-transform: uppercase; letter-spacing: 0.5px; } .table td { font-weight: var(--font-weight-semibold); color: var(--color-text); font-size: var(--font-size-lg); } .table tbody tr:hover { background-color: var(--color-bg-1); } .table tbody tr:last-child td { border-bottom: none; } /* Vehicle rates */ .vehicle-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-20); margin-bottom: var(--space-32); } .rate-card { text-align: center; padding: var(--space-24); background: var(--color-surface); border-radius: var(--radius-lg); border: 2px solid var(--color-border); transition: all var(--duration-normal) var(--ease-standard); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .rate-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, var(--taxi-secondary) 0%, var(--taxi-accent) 100%); } .rate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--taxi-secondary); } .rate-card h3 { color: var(--taxi-primary); margin-bottom: var(--space-12); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); } .rate { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--taxi-accent); margin-bottom: var(--space-8); display: block; } .rate-card p { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-base); } /* Airport services */ .airport-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-32); } .airport-section h3 { color: var(--taxi-orange); margin-bottom: var(--space-16); } .airport-rates { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-20); box-shadow: var(--shadow-sm); } .airport-rate { display: flex; justify-content: space-between; align-items: center; padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border); } .airport-rate:last-child { border-bottom: none; } .airport-rate span:last-child { font-weight: var(--font-weight-bold); color: var(--taxi-green); } /* Route page styles */ .route-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-32) 0; background: linear-gradient(135deg, var(--color-bg-2) 0%, var(--taxi-secondary) 100%); color: var(--taxi-primary); margin-bottom: var(--space-32); border-radius: var(--radius-lg); padding-left: var(--space-24); padding-right: var(--space-24); position: relative; overflow: hidden; } .route-header::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%); border-radius: 50%; transform: translate(30%, -30%); } .route-section h2 { color: var(--taxi-primary); text-align: left; margin-bottom: var(--space-20); } .highlights-list { list-style: none; padding: 0; } .highlights-list li { padding: var(--space-8) 0; position: relative; padding-left: var(--space-24); } .highlights-list li:before { content: '✓'; position: absolute; left: 0; color: var(--taxi-accent); font-weight: var(--font-weight-bold); } /* Departure times */ .departure-times { display: flex; flex-wrap: wrap; gap: var(--space-12); } .time-btn { background: var(--color-surface); border: 2px solid var(--color-border); padding: var(--space-8) var(--space-16); border-radius: var(--radius-base); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); font-weight: var(--font-weight-medium); } .time-btn:hover, .time-btn.selected { background: var(--taxi-accent); border-color: var(--taxi-primary); color: white; } /* Vehicle selection */ .vehicles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-20); } .vehicle-card { text-align: center; padding: var(--space-20); position: relative; transition: all var(--duration-normal) var(--ease-standard); } .vehicle-card:hover { transform: translateY(-4px); } .vehicle-card.selected { border-color: var(--taxi-orange); background: var(--color-bg-2); } .vehicle-icon { font-size: 3rem; margin-bottom: var(--space-12); } .vehicle-card h3 { color: var(--taxi-primary); margin-bottom: var(--space-8); } .vehicle-price { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--taxi-accent); margin-bottom: var(--space-16); } .vehicle-features { list-style: none; padding: 0; margin-bottom: var(--space-20); } .vehicle-features li { padding: var(--space-4) 0; color: var(--color-text-secondary); } .select-vehicle { width: 100%; } .vehicle-card.selected .select-vehicle { background: var(--taxi-accent); border-color: var(--taxi-primary); color: white; } /* Important information */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-24); } .info-card { background: var(--color-surface); padding: var(--space-20); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .info-card h3 { color: var(--taxi-primary); margin-bottom: var(--space-16); } .info-card ul { list-style: none; padding: 0; } .info-card li { padding: var(--space-6) 0; padding-left: var(--space-20); position: relative; } .info-card li:before { content: '•'; position: absolute; left: 0; color: var(--taxi-accent); } /* Booking sidebar */ .booking-sidebar { position: sticky; top: var(--space-32); } .booking-form { padding: var(--space-24); } .booking-form h3 { color: var(--taxi-primary); margin-bottom: var(--space-20); text-align: center; } /* Button overrides */ .btn--primary { background: var(--taxi-accent); color: white; border: none; border-radius: var(--radius-lg); transition: all var(--duration-normal) var(--ease-standard); box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.4); } .btn--primary:hover { background: var(--taxi-secondary); transform: translateY(-1px); box-shadow: 0 6px 20px 0 rgba(34, 197, 94, 0.4); } /* Urgency indicator */ .cta-urgency { display: inline-flex; align-items: center; gap: var(--space-8); background: rgba(34, 197, 94, 0.1); color: var(--taxi-secondary); padding: var(--space-8) var(--space-16); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-20); border: 1px solid rgba(34, 197, 94, 0.2); } .cta-urgency i { animation: blink 2s linear infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } .cta-btn i { font-size: var(--font-size-2xl); transition: transform var(--duration-normal) ease; } .cta-btn:hover i { transform: scale(1.1); } .cta-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s ease; } .cta-btn:hover::before { left: 100%; } /* Footer */ .footer { background: var(--taxi-dark); color: white; padding: var(--space-32) 0 var(--space-16); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-24); margin-bottom: var(--space-24); } .footer-section h3, .footer-section h4 { color: var(--taxi-accent); margin-bottom: var(--space-16); } .footer-section ul { list-style: none; padding: 0; } .footer-section li { margin-bottom: var(--space-8); } .footer-section a { color: white; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .footer-section a:hover { color: var(--taxi-accent); } .footer-bottom { text-align: center; padding-top: var(--space-16); border-top: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); } /* ============================================================================ CITY PAGE HERO SECTION - Enhanced Interactive Design ============================================================================ */ /* City Page Hero Section - Enhanced to match home hero */ .city-page-hero { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); padding: 120px 0 80px; position: relative; overflow: hidden; } .city-page-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 600px; height: 600px; background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%); border-radius: 50%; transform: translate(30%, -30%); } .city-page-hero .container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .city-page-hero .hero-content { text-align: center; max-width: 800px; margin: 0 auto; } .city-page-hero h1 { font-size: 3.5rem; font-weight: 800; color: #171717; line-height: 1.1; margin-bottom: 1.5rem; } .city-page-hero p { font-size: 1.25rem; color: #525252; margin-bottom: 3rem; line-height: 1.6; } .city-page-hero .hero-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; } .city-page-hero .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; border-radius: 12px; font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer; border: none; } .city-page-hero .btn--lg { padding: 1.25rem 2.5rem; font-size: 1.2rem; } .city-page-hero .call-button { background: #10b981; color: white; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); position: relative; animation: hero-pulse 2s infinite; } .city-page-hero .call-button:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4); color: white; animation: none; } .city-page-hero .whatsapp-button { background: #25D366; color: white; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3); } .city-page-hero .whatsapp-button:hover { background: #128C7E; transform: translateY(-2px); box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4); color: white; } .city-page-hero .call-button::after { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(45deg, #10b981, #34d399); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .city-page-hero .call-button:hover::after { opacity: 1; } .city-page-hero .contact-info { background: rgba(255, 255, 255, 0.9); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); border: 1px solid #e5e5e5; } .city-page-hero .phone-display { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 1.1rem; color: #171717; margin-bottom: 1rem; cursor: pointer; transition: transform 0.2s ease; } .city-page-hero .phone-display:hover { transform: scale(1.02); } .city-page-hero .phone-display i { color: #10b981; font-size: 1.2rem; } .city-page-hero .phone-display strong { color: #10b981; font-weight: 700; } .city-page-hero .instant-booking { color: #737373; font-size: 0.95rem; margin: 0; font-style: italic; } @keyframes hero-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* Mobile responsive for city page hero */ @media (max-width: 768px) { .city-page-hero { padding: 80px 0 60px; } .city-page-hero h1 { font-size: 2.5rem; } .city-page-hero p { font-size: 1.1rem; } .city-page-hero .hero-buttons { flex-direction: column; align-items: center; gap: 1rem; } .city-page-hero .btn--lg { width: 100%; max-width: 280px; justify-content: center; } .city-page-hero .contact-info { padding: 1.5rem; margin: 0 1rem; } .city-page-hero .phone-display { flex-direction: column; gap: 0.5rem; text-align: center; } } @media (max-width: 480px) { .city-page-hero h1 { font-size: 2rem; } .city-page-hero .btn--lg { padding: 1rem 1.5rem; font-size: 1rem; } } /* ============================================================================ */ /* SEO CONTENT STYLING - For Dynamic City Pages */ /* ============================================================================ */ /* SEO Content Container */ .seo-content { background: var(--color-bg-1); border-radius: var(--radius-lg); margin-top: var(--space-32); } .seo-content-wrapper { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-32); box-shadow: var(--shadow-sm); border: 1px solid var(--color-card-border); } /* SEO Content Typography */ .seo-content-wrapper h2 { color: var(--taxi-primary); font-size: var(--font-size-3xl); margin-bottom: var(--space-24); text-align: left; border-bottom: 2px solid var(--color-bg-2); padding-bottom: var(--space-12); } .seo-content-wrapper h3 { color: var(--taxi-secondary); font-size: var(--font-size-2xl); margin: var(--space-24) 0 var(--space-16) 0; border-left: 4px solid var(--taxi-accent); padding-left: var(--space-16); } .seo-content-wrapper p { font-size: var(--font-size-lg); line-height: var(--line-height-normal); color: var(--color-text); margin-bottom: var(--space-20); } /* SEO Content Lists */ .seo-content-wrapper ul { list-style: none; padding: 0; margin: var(--space-20) 0; background: var(--color-bg-3); border-radius: var(--radius-base); padding: var(--space-20); } .seo-content-wrapper li { position: relative; padding: var(--space-8) 0 var(--space-8) var(--space-32); font-size: var(--font-size-lg); color: var(--color-text); border-bottom: 1px solid var(--color-border); } .seo-content-wrapper li:last-child { border-bottom: none; } .seo-content-wrapper li:before { content: '\2713'; position: absolute; left: var(--space-8); top: var(--space-8); color: var(--taxi-accent); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); } .seo-content-wrapper section { padding: 0; } /* SEO Content Mobile Responsive */ @media (max-width: 768px) { .seo-content-wrapper { padding: var(--space-20); } .seo-content-wrapper h2 { font-size: var(--font-size-2xl); } .seo-content-wrapper h3 { font-size: var(--font-size-xl); } } /* CTA Section Styles - Enhanced Interactive Design */ .cta-section { background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #dcfce7 100%); color: var(--color-text); text-align: center; border-radius: var(--radius-lg); padding: var(--space-32); margin: var(--space-32) 0; position: relative; overflow: hidden; border: 2px solid var(--color-bg-3); box-shadow: 0 20px 60px rgba(34, 197, 94, 0.08); } .cta-container h2 { color: var(--taxi-primary) !important; margin-bottom: var(--space-16); position: relative; z-index: 2; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); } .cta-container p { color: var(--color-text-secondary); font-size: var(--font-size-lg); margin-bottom: var(--space-24); position: relative; z-index: 2; } .cta-btn { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-20); border-radius: var(--radius-base); font-weight: var(--font-weight-semibold); text-decoration: none; transition: all var(--duration-normal) var(--ease-standard); font-size: var(--font-size-base); position: relative; overflow: hidden; min-width: 180px; justify-content: center; border: 2px solid transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .cta-btn.btn-primary { background: linear-gradient(135deg, var(--taxi-secondary) 0%, var(--taxi-accent) 100%); color: white; border-color: var(--taxi-secondary); animation: gentle-pulse 3s ease-in-out infinite; } .cta-btn.btn-primary:hover { background: linear-gradient(135deg, var(--taxi-accent) 0%, var(--taxi-secondary) 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25); animation: none; } .cta-btn.btn-secondary { background: white; color: var(--taxi-secondary); border-color: var(--taxi-secondary); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.12); } .cta-btn.btn-secondary:hover { background: var(--taxi-secondary); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2); } @keyframes gentle-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15); } 50% { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25); } } /* ============================================================================ */ /* MODERN CITY PAGE SECTIONS - Corporate Design */ /* ============================================================================ */ /* Modern Section Base */ .modern-section { padding: var(--space-32) 0; position: relative; } .modern-section.bg-light { background: var(--color-bg-1); } .section-header { text-align: center; margin-bottom: var(--space-32); } .section-header h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-16); display: flex; align-items: center; justify-content: center; gap: var(--space-12); } .section-header h2 i { color: var(--taxi-secondary); font-size: var(--font-size-2xl); } .section-header p { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--line-height-normal); } /* ============================================================================ */ /* CITY DETAILS SECTION */ /* ============================================================================ */ .city-details-section { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-32); margin: var(--space-32) 0; box-shadow: var(--shadow-sm); border: 1px solid var(--color-card-border); } .city-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-24); } .detail-card { background: white; padding: var(--space-24); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: all var(--duration-normal) var(--ease-standard); cursor: pointer; position: relative; overflow: hidden; } .detail-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(135deg, var(--taxi-primary) 0%, var(--taxi-secondary) 100%); transform: scaleY(0); transition: transform var(--duration-normal) var(--ease-standard); transform-origin: bottom; } .detail-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--taxi-secondary); } .detail-card:hover::before { transform: scaleY(1); } .detail-card { display: flex; align-items: flex-start; gap: var(--space-16); } .detail-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--taxi-secondary) 0%, var(--taxi-accent) 100%); border-radius: var(--radius-base); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--font-size-xl); flex-shrink: 0; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); } .detail-content { flex: 1; } .detail-content h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--space-8); } .detail-content p { color: var(--color-text-secondary); line-height: var(--line-height-normal); font-size: var(--font-size-base); } /* ============================================================================ */ /* FAQ SECTION */ /* ============================================================================ */ .faq-section { background: var(--color-bg-1); border-radius: var(--radius-lg); padding: var(--space-32); margin: var(--space-32) 0; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background: white; border-radius: var(--radius-lg); margin-bottom: var(--space-16); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); overflow: hidden; transition: all var(--duration-normal) var(--ease-standard); } .faq-item:hover { box-shadow: var(--shadow-md); border-color: var(--taxi-secondary); } .faq-item.active { border-color: var(--taxi-secondary); box-shadow: 0 4px 20px rgba(34, 197, 94, 0.1); } .faq-question { padding: var(--space-20) var(--space-24); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all var(--duration-fast) var(--ease-standard); background: white; position: relative; } .faq-question::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--taxi-orange) 0%, var(--taxi-green) 100%); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); z-index: 1; } .faq-question:hover::before { opacity: 0.05; } .faq-item.active .faq-question::before { opacity: 0.1; } .faq-question h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; position: relative; z-index: 2; } .faq-question i { color: var(--taxi-secondary); font-size: var(--font-size-base); transition: all var(--duration-fast) var(--ease-standard); position: relative; z-index: 2; } .faq-answer { padding: 0 var(--space-24) var(--space-20); background: var(--color-bg-3); display: none; } .faq-answer p { color: var(--color-text-secondary); line-height: var(--line-height-normal); font-size: var(--font-size-base); margin: 0; } /* ============================================================================ */ /* RESPONSIVE DESIGN FOR NEW SECTIONS */ /* ============================================================================ */ @media (max-width: 768px) { .modern-section { padding: var(--space-24) 0; } .section-header h2 { font-size: var(--font-size-2xl); flex-direction: column; gap: var(--space-8); } .city-details-section { padding: var(--space-20); margin: var(--space-20) 0; } .city-details-grid { grid-template-columns: 1fr; gap: var(--space-16); } .detail-card { flex-direction: column; text-align: center; } .detail-icon { margin: 0 auto var(--space-12); } .faq-section { padding: var(--space-20); margin: var(--space-20) 0; } .faq-question { padding: var(--space-16) var(--space-20); } .faq-question h3 { font-size: var(--font-size-base); } .faq-answer { padding: 0 var(--space-20) var(--space-16); } } @media (max-width: 480px) { .detail-card { padding: var(--space-16); } .detail-icon { width: 50px; height: 50px; font-size: var(--font-size-lg); } } /* ============================================================================ */ /* ENHANCED RESPONSIVE DESIGN SYSTEM */ /* ============================================================================ */ /* Add missing mobile responsive styles for CTA buttons */ @media (max-width: 768px) { .nav { display: none; } .mobile-menu-toggle { display: block; } .container { padding: 0 var(--space-12); } .city-header { padding: var(--space-24) var(--space-16); margin: 0 0 var(--space-24) 0; } .city-header h1 { font-size: var(--font-size-3xl); } .packages-section { padding: 0; margin-bottom: var(--space-24); } .packages-section h2 { font-size: var(--font-size-2xl); margin-bottom: var(--space-16); } .pricing-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table th, .table td { padding: var(--space-12) var(--space-8); font-size: var(--font-size-sm); white-space: nowrap; } .vehicle-rates { grid-template-columns: 1fr; gap: var(--space-16); } .rate-card { padding: var(--space-20); } .route-content { grid-template-columns: 1fr; } .booking-sidebar { position: static; } .route-header { flex-direction: column; text-align: center; gap: var(--space-16); } .route-info { flex-direction: column; } .hero-content h1 { font-size: var(--font-size-3xl); } .services-grid, .cities-grid, .routes-grid, .steps-grid { grid-template-columns: 1fr; } .vehicles-grid { grid-template-columns: 1fr; } .airport-services { grid-template-columns: 1fr; } /* Enhanced CTA Button Mobile Styles */ .cta-buttons { flex-direction: column; align-items: center; gap: var(--space-12); } .cta-btn { width: 100%; max-width: 240px; justify-content: center; padding: var(--space-12) var(--space-16); font-size: var(--font-size-base); min-width: auto; } .cta-section { padding: var(--space-24); margin: var(--space-24) 0; } .cta-container h2 { font-size: var(--font-size-2xl); } /* Hero buttons mobile optimization */ .hero-buttons { flex-direction: column; align-items: center; gap: var(--space-16); } .hero-buttons .btn { width: 100%; max-width: 280px; justify-content: center; } } /* Tablet responsive adjustments */ @media (max-width: 1024px) and (min-width: 769px) { .hero-content h1 { font-size: var(--font-size-4xl); } .cta-btn { min-width: 220px; } .services-grid, .cities-grid { grid-template-columns: repeat(2, 1fr); } .routes-grid { grid-template-columns: repeat(2, 1fr); } } /* Small mobile devices */ @media (max-width: 480px) { .container { padding-left: var(--space-8); padding-right: var(--space-8); } .city-header { padding: var(--space-16); } .city-header h1 { font-size: var(--font-size-2xl); } .packages-section h2 { font-size: var(--font-size-xl); } .table th, .table td { padding: var(--space-8) var(--space-4); font-size: var(--font-size-sm); } .rate-card { padding: var(--space-16); } .rate-card h3 { font-size: var(--font-size-xl); } .rate { font-size: var(--font-size-2xl); } .departure-times { justify-content: center; } .time-btn { flex: 1; min-width: 80px; } .cta-btn { padding: var(--space-12) var(--space-16); font-size: var(--font-size-base); } .hero-buttons .btn { padding: var(--space-12) var(--space-16); font-size: var(--font-size-base); } } /* Large screens optimization */ @media (min-width: 1200px) { .hero-content h1 { font-size: calc(var(--font-size-4xl) + 0.5rem); } .cta-btn { min-width: 300px; } .services-grid { grid-template-columns: repeat(4, 1fr); } .cities-grid { grid-template-columns: repeat(4, 1fr); } .routes-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================================ */ /* UTILITY CLASSES FOR BETTER MAINTAINABILITY */ /* ============================================================================ */ /* Spacing utilities */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-4); } .mt-2 { margin-top: var(--space-8); } .mt-3 { margin-top: var(--space-12); } .mt-4 { margin-top: var(--space-16); } .mt-5 { margin-top: var(--space-20); } .mt-6 { margin-top: var(--space-24); } .mt-8 { margin-top: var(--space-32); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-4); } .mb-2 { margin-bottom: var(--space-8); } .mb-3 { margin-bottom: var(--space-12); } .mb-4 { margin-bottom: var(--space-16); } .mb-5 { margin-bottom: var(--space-20); } .mb-6 { margin-bottom: var(--space-24); } .mb-8 { margin-bottom: var(--space-32); } .p-0 { padding: 0; } .p-1 { padding: var(--space-4); } .p-2 { padding: var(--space-8); } .p-3 { padding: var(--space-12); } .p-4 { padding: var(--space-16); } .p-5 { padding: var(--space-20); } .p-6 { padding: var(--space-24); } .p-8 { padding: var(--space-32); } /* Display utilities */ .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .d-grid { display: grid; } /* Flexbox utilities */ .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } /* Text utilities */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .text-4xl { font-size: var(--font-size-4xl); } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } /* Color utilities */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-text-secondary); } .text-accent { color: var(--taxi-accent); } .text-white { color: white; } .bg-primary { background-color: var(--color-primary); } .bg-white { background-color: white; } .bg-light { background-color: var(--color-bg-1); } .bg-accent { background-color: var(--taxi-accent); } /* Border utilities */ .border { border: 1px solid var(--color-border); } .border-0 { border: none; } .border-accent { border-color: var(--taxi-accent); } .rounded { border-radius: var(--radius-base); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } /* Shadow utilities */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-none { box-shadow: none; } /* Position utilities */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } /* Z-index utilities */ .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } .z-100 { z-index: 100; } /* Width utilities */ .w-full { width: 100%; } .w-auto { width: auto; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } /* ============================================================================ */ /* ACCESSIBILITY IMPROVEMENTS */ /* ============================================================================ */ /* Focus styles for better accessibility */ *:focus { outline: 2px solid var(--taxi-accent); outline-offset: 2px; } /* Skip link for screen readers */ .skip-link { position: absolute; top: -40px; left: 6px; background: var(--taxi-accent); color: white; padding: 8px; text-decoration: none; border-radius: var(--radius-base); z-index: 1000; } .skip-link:focus { top: 6px; } /* Improved button focus states */ .btn:focus, .cta-btn:focus { outline: 2px solid var(--taxi-accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1); } /* Screen reader only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --color-border: #000000; --color-text-secondary: #000000; } .btn, .cta-btn { border: 2px solid; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .call-button { animation: none; } .cta-btn.btn-primary { animation: none; } } /* ============================================================================ */ /* PERFORMANCE OPTIMIZATIONS */ /* ============================================================================ */ /* Optimize animations for better performance */ .hero::before, .city-page-hero::before, .cta-section::before { will-change: transform; } .btn, .cta-btn, .service-card, .city-card, .route-card { will-change: transform; } /* Optimize font loading */ @font-face { font-family: 'Arial'; font-display: swap; } /* Optimize background images */ .hero, .city-page-hero, .cta-section { background-attachment: scroll; /* Better for mobile performance */ } /* ============================================================================ */ /* PRINT STYLES */ /* ============================================================================ */ @media print { .header, .footer, .cta-section, .hero-buttons, .cta-buttons { display: none; } body { font-size: 12pt; line-height: 1.5; color: black; background: white; } .container { max-width: none; padding: 0; } .table { break-inside: avoid; } .rate-card, .service-card { break-inside: avoid; border: 1px solid black; margin-bottom: 1rem; } }