/* tourlytransfer.com - Premium Editorial Chauffeur Style Visual System: Heritage Serif (Cormorant Garamond) + Modern Sans-Serif (Inter) Rolex/Vogue Editorial Contrast with cinematic micro-interactions & silk background */ /* Fonts are loaded via in each page's (with preconnect) instead of a render-blocking @import here. */ :root { /* Color Palette - Dark Zinc & Pure White */ --bg-primary: #09090b; /* Pure Zinc 950 */ --bg-secondary: #0c0c0e; /* Slightly darker for depth */ --bg-card: rgba(255, 255, 255, 0.02); /* bg-white/4 */ --bg-card-hover: rgba(255, 255, 255, 0.05); /* bg-white/7 */ --border-soft: rgba(255, 255, 255, 0.06); /* border-white/10 */ --border-hover: rgba(255, 255, 255, 0.25); /* border-white/25 */ --text-primary: #ffffff; --text-secondary: #a1a1aa; /* zinc-400 */ --text-muted: #52525b; /* zinc-600 */ /* Single restrained accent - warm metallic brass (WCAG AA compliant contrast) */ --accent-brass: #cba876; --accent-brass-soft: rgba(203, 168, 118, 0.35); /* Typography Variables */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.15s ease; } @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; } } ::selection { background: var(--accent-brass); color: #09090b; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent-brass); outline-offset: 2px; } /* Self-hosted icon set - replaces the FontAwesome CDN (~100KB) with inline SVG masks for the 14 icons actually used. Markup keeps the fa-* classes. */ i.fas, i.fab { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } i.fa-bars { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); } i.fa-arrow-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); } i.fa-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); } i.fa-check-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 5-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 5-6'/%3E%3C/svg%3E"); } i.fa-envelope { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); } i.fa-phone-alt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } i.fa-map-marker-alt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.75-7-11a7 7 0 0 1 14 0c0 5.25-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.75-7-11a7 7 0 0 1 14 0c0 5.25-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); } i.fa-suitcase { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M8 7v13M16 7v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M8 7v13M16 7v13'/%3E%3C/svg%3E"); } i.fa-user-friends, i.fa-users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } i.fa-user-tie { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M12 13.5l1.3 1.8-1.3 4.2-1.3-4.2z' fill='white' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M12 13.5l1.3 1.8-1.3 4.2-1.3-4.2z' fill='white' stroke='none'/%3E%3C/svg%3E"); } i.fa-route { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Cpath d='M7 19h7.5a3.5 3.5 0 0 0 0-7h-5a3.5 3.5 0 0 1 0-7H17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Cpath d='M7 19h7.5a3.5 3.5 0 0 0 0-7h-5a3.5 3.5 0 0 1 0-7H17'/%3E%3C/svg%3E"); } i.fa-plane-arrival { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4l-8.5 8.5M20 4l-5.5 14.5-3-6.5-6.5-3z'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4l-8.5 8.5M20 4l-5.5 14.5-3-6.5-6.5-3z'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); } i.fa-calendar-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M9 15l2 2 4-4'/%3E%3C/svg%3E"); } i.fa-whatsapp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0-7.9 13.3L3 21l4.9-1.1A9 9 0 1 0 12 3z'/%3E%3Cpath d='M8.8 8.2c-.4 1.2 0 2.9 1.5 4.6 1.5 1.6 3.4 2.6 4.7 2.4.7-.1 1.4-.7 1.5-1.4l-2.1-1.1-1 1c-.9-.3-1.7-.9-2.4-1.7-.7-.7-1.2-1.5-1.4-2.3l1.1-.9-1.2-2c-.7.2-1.5.7-1.7 1.4z' fill='white' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0-7.9 13.3L3 21l4.9-1.1A9 9 0 1 0 12 3z'/%3E%3Cpath d='M8.8 8.2c-.4 1.2 0 2.9 1.5 4.6 1.5 1.6 3.4 2.6 4.7 2.4.7-.1 1.4-.7 1.5-1.4l-2.1-1.1-1 1c-.9-.3-1.7-.9-2.4-1.7-.7-.7-1.2-1.5-1.4-2.3l1.1-.9-1.2-2c-.7.2-1.5.7-1.7 1.4z' fill='white' stroke='none'/%3E%3C/svg%3E"); } /* Reset & Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: radial-gradient(circle at 50% 0%, #15151b 0%, #09090b 70%); background-attachment: fixed; color: var(--text-primary); font-family: var(--font-sans); line-height: 1.625; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Hide ambient glow spots */ .ambient-glow { display: none !important; } /* Typography Utilities - Heritage Serif for Headings */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.01em; color: var(--text-primary); } p { color: var(--text-secondary); font-family: var(--font-sans); font-weight: 400; } /* Header & Navigation - Pure White Background */ header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid #e4e4e7; background-color: #ffffff; transition: var(--transition-smooth); } header.scrolled { position: fixed; background: #ffffff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); border-bottom-color: var(--accent-brass-soft); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; } .logo { text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; color: #09090b; text-transform: uppercase; font-family: var(--font-sans); } .logo span { font-weight: 400; color: #52525b; } .nav-links { display: flex; gap: 2.25rem; list-style: none; } .nav-links > li { position: relative; } .nav-links > li > a { position: relative; text-decoration: none; color: #52525b; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; padding-bottom: 5px; transition: var(--transition-fast); } .nav-links > li > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent-brass); transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links > li > a:hover { color: #000000; } .nav-links > li > a:hover::after { width: 100%; } .nav-links > li > a.active { color: #000000; } .nav-links > li > a.active::after { width: 100%; background: var(--accent-brass); } /* Dropdown submenus */ .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); background: #ffffff; border: 1px solid #e4e4e7; border-radius: 10px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14); padding: 0.5rem; min-width: 230px; list-style: none; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1050; } .nav-links > li.has-dropdown:hover .nav-dropdown, .nav-links > li.has-dropdown.open .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown li a { display: block; padding: 0.6rem 0.75rem; border-radius: 6px; font-size: 0.82rem; font-family: var(--font-sans); font-weight: 500; white-space: nowrap; color: #52525b; text-decoration: none; transition: var(--transition-fast); } .nav-dropdown li a:hover { background: #f4f4f5; color: #09090b; } .nav-actions { display: flex; align-items: center; gap: 1.5rem; } .btn-contact { text-decoration: none; color: #52525b; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; transition: var(--transition-fast); } .btn-contact:hover { color: #000000; } /* Header Booking Button - Stark Black with White text */ .btn-premium { display: inline-block; background: #09090b; color: #ffffff; border: 1px solid #09090b; border-radius: 9999px; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; padding: 0.55rem 1.4rem; cursor: pointer; text-decoration: none; transition: var(--transition-smooth); } .btn-premium:hover { background: transparent; color: #09090b; letter-spacing: 0.02em; } .menu-toggle { display: none; background: none; border: none; color: #09090b; font-size: 1.3rem; cursor: pointer; z-index: 1200; position: relative; padding: 0.75rem; margin: -0.75rem; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; touch-action: manipulation; } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 9rem 2rem 5rem; background: linear-gradient(180deg, rgba(9, 9, 11, 0.65) 0%, rgba(9, 9, 11, 0.95) 100%), url('assets/hero_bg.jpg') no-repeat center center / cover; background-attachment: fixed; } .hero-container { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; } .hero-content { display: flex; flex-direction: column; gap: 2.25rem; } .hero-subtitle { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); font-family: var(--font-sans); } .hero-content h1 { font-size: 4.5rem; line-height: 1.08; font-weight: 300; color: var(--text-primary); font-family: var(--font-serif); } .hero-content p { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); font-family: var(--font-sans); } .hero-ctas { display: flex; gap: 2rem; align-items: center; } .btn-hero-link { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); } .btn-hero-link span { transition: var(--transition-fast); } .btn-hero-link:hover span { transform: translateX(4px); } /* Hero Container - 2-Column Grid Layout */ .hero-container { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; } /* High-Contrast Pure White Interactive Booking Widget Card */ .booking-widget { background: #ffffff; border: 1px solid #f4f4f5; border-radius: 16px; padding: 2.75rem 2.25rem; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05); color: #09090b; } .booking-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: #f4f4f5; padding: 3px; border-radius: 9999px; margin-bottom: 2.25rem; } .tab-btn { background: transparent; border: none; color: #71717a; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; padding: 0.65rem 0; border-radius: 9999px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-align: center; } .tab-btn:hover { color: #09090b; } .tab-btn.active { background-color: #ffffff; color: #09090b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); font-weight: 600; } .tab-btn { border-radius: 9999px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-align: center; letter-spacing: 0.01em; position: relative; } /* Invisible vertical tap-area extension so tabs meet the 44px touch guideline without changing their rendered height */ .tab-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; } .tab-btn:hover { color: #09090b; } .tab-btn.active { background-color: #ffffff; color: #09090b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); font-weight: 600; } .booking-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.45rem; } /* Form Labels in Booking Form */ .form-group label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #3f3f46; font-family: var(--font-sans); } /* Light Glass Inputs & Selects — the booking widget card is light, so fields need dark text and a visible border, not the old dark-card styling. */ .form-group input, .form-group select { appearance: none; -webkit-appearance: none; background: #ffffff !important; border: 1.5px solid #d1d1d6 !important; border-radius: 12px; color: #09090b !important; font-family: var(--font-sans); font-size: 0.9rem; padding: 0.85rem 1.1rem; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); outline: none; color-scheme: light; } .form-group input::placeholder { color: #a1a1aa; } .form-group input:focus, .form-group select:focus { border-color: var(--accent-brass); background: #ffffff; box-shadow: 0 0 0 3px rgba(203, 168, 118, 0.18); } .form-group select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cba876' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1em; padding-right: 2.5rem; } /* Dark Glass Estimate Box */ .estimate-box { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .est-details { display: flex; flex-direction: column; gap: 0.25rem; } .est-details span { font-size: 0.68rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; font-family: var(--font-sans); } .est-details strong { color: #ffffff; font-size: 0.9rem; font-weight: 600; font-family: var(--font-sans); } .est-price { text-align: right; } .est-price span { display: block; font-size: 0.68rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; font-family: var(--font-sans); margin-bottom: 0.2rem; } .est-price h3 { font-size: 1.85rem; color: var(--accent-brass); font-weight: 700; font-family: var(--font-sans); } /* Booking widget reassurance line - reduces last-step hesitation */ /* Two-step booking flow: journey details -> vehicle + confirm */ .booking-step { display: flex; flex-direction: column; gap: 1.5rem; } .booking-vehicle-panel { display: flex; flex-direction: column; gap: 1.5rem; } .booking-step-back { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; background: none; border: none; padding: 0; text-decoration: none; color: #71717a; /* zinc-500 */ font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: var(--transition-fast); } .booking-step-back:hover { color: #09090b; } .booking-step-back span { font-size: 0.9rem; } /* Vehicle selection cards - visual radio group driving the hidden select */ .vehicle-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .vehicle-card { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #d4d4d8; /* zinc-300 */ border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); transition: var(--transition-fast); } .vehicle-card:hover { border-color: #71717a; /* zinc-500 */ } .vehicle-card.selected { border-color: #09090b; box-shadow: inset 0 0 0 1px #09090b; } .vehicle-card-badge { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; background: #09090b; color: #ffffff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 9999px; } .vehicle-card-image { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f4f5; } .vehicle-card-image img { width: 100%; height: 100%; object-fit: cover; } .vehicle-card-body { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.75rem 0.85rem; } .vehicle-card-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .vehicle-card-info strong { font-size: 0.8rem; font-weight: 600; color: #09090b; white-space: nowrap; } .vehicle-card-info span { font-size: 0.68rem; color: #71717a; white-space: nowrap; } .vehicle-card-price { font-size: 0.85rem; font-weight: 700; color: #09090b; white-space: nowrap; } /* Reassurance line under the booking button */ .booking-reassurance { text-align: center; font-size: 0.72rem; line-height: 1.5; color: #71717a; font-family: var(--font-sans); margin-top: -0.5rem; } /* Inline validation message - shown instead of a blocking alert() */ .booking-error-line { text-align: center; font-size: 0.8rem; font-weight: 500; font-family: var(--font-sans); color: #b3261e; background: #fdf0ef; border: 1px solid #f3d6d3; border-radius: 8px; padding: 0.6rem 1rem; margin-bottom: -0.5rem; } .booking-error-line[hidden] { display: none; } .btn-submit-booking.is-submitting { opacity: 0.75; cursor: wait; } /* Booking Request Button - Black Pill */ .btn-submit-booking { display: inline-block; background: #0a0a0a; color: #ffffff; border: none; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.95rem 1.75rem; border-radius: 9999px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); text-align: center; box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.35); } .btn-submit-booking:hover { background: #1a1a1a; transform: translateY(-2px); box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5); } /* Horizontal Features Banner */ .features-banner { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background-color: var(--bg-secondary); } .features-banner-container { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; } .feat-banner-item { display: flex; flex-direction: column; gap: 0.5rem; } .feat-banner-item h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); font-family: var(--font-sans); } .feat-banner-item p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; font-family: var(--font-sans); } /* Sections General */ body { counter-reset: section-counter; } .section { padding: 8rem 2rem; max-width: 1200px; margin: 0 auto; counter-increment: section-counter; } .section-header { margin-bottom: 5rem; display: flex; flex-direction: column; gap: 1rem; } .section-subtitle { display: flex; align-items: center; gap: 0.6em; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); font-weight: 600; font-family: var(--font-sans); } .section-subtitle::before { content: "0" counter(section-counter) ""; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent-brass); } .section-title { font-size: 3rem; font-weight: 300; max-width: 700px; line-height: 1.15; font-family: var(--font-serif); } /* Grid of Cards (Use cases) */ .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } .card-item { background-color: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; transition: var(--transition-smooth); text-decoration: none; color: inherit; } .card-item:hover { background-color: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.02); } .card-item-top h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: 1rem; color: var(--text-primary); font-family: var(--font-serif); } /* Blog card meta line (category + read time) */ .blog-card-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-brass); font-family: var(--font-sans); font-weight: 600; margin-bottom: 0.85rem; } .blog-card-meta span:last-child { color: var(--text-secondary); text-transform: none; letter-spacing: normal; font-weight: 500; } .blog-card-meta .meta-dot { color: var(--border-hover); } /* Long-form article body (blog posts, reuses legal-page typography) */ .article-body { font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.7; font-size: 0.95rem; } .article-body h2 { font-family: var(--font-serif); font-size: 1.75rem; color: var(--text-primary); font-weight: 300; margin: 2.25rem 0 1rem; } .article-body p { margin-bottom: 1.25rem; } .article-body ul { margin: 0 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .article-body a { color: var(--text-primary); text-decoration: underline; } .article-featured-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 1.25rem 0 2rem; display: block; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* Responsive Vehicle Cards for small screens (<380px) */ @media (max-width: 380px) { .vehicle-cards { grid-template-columns: 1fr !important; } .vehicle-card { padding: 0.85rem !important; } .vehicle-card-body { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } } /* Author bio + meta card, shown at the end of a blog post */ .author-bio-card { display: flex; gap: 2.5rem; margin-top: 3rem; padding: 2rem; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-card); } .author-bio-main { display: flex; gap: 1.25rem; flex: 1 1 auto; min-width: 0; } .author-avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--accent-brass); background: var(--bg-primary); color: var(--accent-brass); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; } .author-label { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-brass); margin-bottom: 0.35rem; } .author-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; color: var(--text-primary); margin: 0 0 0.15rem; } .author-role { font-family: var(--font-sans); font-size: 0.85rem; color: var(--accent-brass); margin: 0 0 0.75rem; } .author-desc { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.65; color: var(--text-secondary); margin: 0 0 1rem; } .author-social { display: flex; gap: 0.6rem; } .author-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-soft); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: var(--transition-fast); } .author-social a:hover { border-color: var(--accent-brass); color: var(--accent-brass); } .author-meta { flex: 0 0 220px; display: flex; flex-direction: column; gap: 1.1rem; padding-left: 2.5rem; border-left: 1px solid var(--border-soft); } .author-meta-item { display: flex; align-items: flex-start; gap: 0.75rem; } .author-meta-item i { color: var(--accent-brass); font-size: 0.9rem; margin-top: 0.2rem; width: 16px; text-align: center; } .author-meta-label { display: block; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .author-meta-value { display: block; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-primary); margin-top: 0.15rem; } @media (max-width: 700px) { .author-bio-card { flex-direction: column; gap: 1.5rem; padding: 1.5rem; } .author-meta { flex: 1 1 auto; padding-left: 0; border-left: none; border-top: 1px solid var(--border-soft); padding-top: 1.5rem; flex-direction: row; flex-wrap: wrap; gap: 1.25rem 2rem; } } .card-item-top p { font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); font-family: var(--font-sans); } .card-item-bottom { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); margin-top: 2rem; transition: var(--transition-fast); font-family: var(--font-sans); } .card-item:hover .card-item-bottom { color: var(--text-primary); } .card-item-bottom i { transition: var(--transition-fast); } .card-item:hover .card-item-bottom i { transform: translateX(4px); } /* Informational (non-clickable) cards keep the resting look on hover */ .card-item.card-static { cursor: default; } .card-item.card-static:hover { background-color: var(--bg-card); border-color: var(--border-soft); transform: none; box-shadow: none; } .card-item.card-static:hover .card-item-bottom { color: var(--text-secondary); } .card-item.card-static:hover .card-item-bottom i { transform: none; } /* Fleet Filters */ .fleet-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem; } .filter-btn { background: transparent; border: 1px solid var(--border-soft); border-radius: 9999px; color: var(--text-secondary); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; padding: 0.55rem 1.35rem; cursor: pointer; transition: var(--transition-smooth); } .filter-btn:hover { border-color: var(--border-hover); color: var(--text-primary); } .filter-btn.active { background: var(--text-primary); border-color: var(--text-primary); color: #09090b; } /* Fleet Listing Grid */ .fleet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; } .fleet-card { background-color: transparent; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-soft); display: flex; flex-direction: column; transition: var(--transition-smooth); } .fleet-card:hover { border-color: var(--border-hover); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); } .fleet-image { height: 280px; overflow: hidden; } .fleet-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(85%) contrast(1.05) brightness(0.92); transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; } .fleet-card:hover .fleet-image img { transform: scale(1.05); /* slow cinematic zoom-in */ filter: grayscale(0%) contrast(1.05) brightness(1); } .fleet-info { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; } .fleet-info-header { display: flex; justify-content: space-between; align-items: baseline; } .fleet-info-header h3 { font-size: 1.6rem; font-weight: 400; font-family: var(--font-serif); } .fleet-rate { font-size: 1.15rem; color: var(--text-primary); font-weight: 600; font-family: var(--font-sans); } .fleet-rate span { font-size: 0.8rem; color: var(--text-secondary); font-weight: 400; } .fleet-specs { display: flex; gap: 2rem; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-soft); padding-bottom: 1rem; font-family: var(--font-sans); } .fleet-specs i { color: var(--text-primary); } .fleet-amenities { display: flex; flex-wrap: wrap; gap: 0.5rem; } .amenity-tag { background-color: var(--bg-card); border: 1px solid var(--border-soft); padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.75rem; color: var(--text-secondary); font-family: var(--font-sans); } /* Day trips grid */ .tours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .tour-card { background-color: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; height: 380px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; color: inherit; transition: var(--transition-smooth); } .tour-card:hover { border-color: var(--border-hover); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); } .tour-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-position: center; filter: grayscale(85%) contrast(1.05) brightness(0.85); transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; } .tour-card:hover .tour-bg { transform: scale(1.05); /* slow cinematic zoom-in */ filter: grayscale(0%) contrast(1.05) brightness(0.9); } .tour-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient(to top, rgba(9, 9, 11, 0.98) 15%, rgba(9, 9, 11, 0.5) 60%, transparent); } .tour-content { position: relative; z-index: 3; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .tour-duration { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; font-family: var(--font-sans); } .tour-card h3 { font-size: 1.4rem; font-weight: 400; font-family: var(--font-serif); } .tour-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; font-family: var(--font-sans); } .tour-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.75rem; margin-top: 0.5rem; } .tour-price { font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-sans); } /* Testimonials */ .testimonials { background-color: transparent; border-bottom: 1px solid var(--border-soft); } .testimonial-container { max-width: 850px; margin: 0 auto; position: relative; text-align: center; } .testimonial-slide { display: none; flex-direction: column; align-items: center; gap: 2rem; animation: fadeIn 0.6s ease forwards; } .testimonial-slide.active { display: flex; } .quote-icon { font-size: 3rem; color: var(--accent-brass); line-height: 1; opacity: 0.55; } .testimonial-text { font-family: var(--font-serif); font-size: 2rem; line-height: 1.45; color: var(--text-primary); font-weight: 300; font-style: italic; } .testimonial-author { display: flex; flex-direction: column; gap: 0.35rem; } .testimonial-author strong { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); font-family: var(--font-sans); } .testimonial-author span { font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-sans); } .slider-dots { display: flex; justify-content: center; gap: 0.75rem; margin-top: 3rem; } .dot { width: 6px; height: 6px; background-color: var(--text-muted); border-radius: 50%; cursor: pointer; transition: var(--transition-fast); } .dot.active { background-color: var(--text-primary); transform: scale(1.4); } /* Call To Action Banner */ .cta-banner { background-color: var(--bg-secondary); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding: 7rem 2rem; text-align: center; } .cta-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .cta-container h2 { font-size: 2.75rem; font-weight: 300; line-height: 1.2; font-family: var(--font-serif); } .cta-container p { font-size: 1.1rem; max-width: 600px; color: var(--text-secondary); font-family: var(--font-sans); } .cta-buttons { display: flex; gap: 1.5rem; } /* Secondary Button design */ .btn-secondary { display: inline-block; background: transparent; color: var(--text-primary); border: 1px solid var(--border-soft); border-radius: 9999px; font-family: var(--font-sans); font-weight: 500; padding: 0.7rem 1.6rem; text-decoration: none; font-size: 0.85rem; transition: var(--transition-smooth); cursor: pointer; } .btn-secondary:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--border-hover); } /* Modal Dialogs */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: var(--transition-smooth); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-content { background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: 16px; width: 100%; max-width: 550px; padding: 3.5rem; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); transform: scale(0.96) translateY(20px); transition: var(--transition-smooth); } .modal-overlay.open .modal-content { transform: scale(1) translateY(0); } .modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; transition: var(--transition-fast); } .modal-close:hover { color: var(--text-primary); } .modal-header { margin-bottom: 2.5rem; } .modal-header h3 { font-size: 2rem; font-weight: 400; margin-bottom: 0.5rem; font-family: var(--font-serif); } .modal-header p { font-size: 0.95rem; color: var(--text-secondary); font-family: var(--font-sans); } /* Footer Section */ /* Footer Section - Dark Luxury Styling */ footer { background-color: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 6rem 2rem 2.5rem; } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 0.9fr 1fr 0.9fr 0.9fr; gap: 2.75rem; margin-bottom: 5rem; } .footer-col { display: flex; flex-direction: column; gap: 1.5rem; } .footer-about p { font-size: 0.95rem; line-height: 1.6; color: #52525b; font-family: var(--font-sans); } .footer-col h4 { font-family: var(--font-sans); font-size: 0.85rem; color: #09090b; font-weight: 600; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; } .footer-links a { text-decoration: none; color: #52525b; font-size: 0.9rem; transition: var(--transition-fast); font-family: var(--font-sans); display: inline-block; padding: 0.35rem 0; margin: -0.35rem 0; } .footer-links a:hover { color: var(--accent-brass); } .contact-info { display: flex; flex-direction: column; gap: 1rem; } .contact-item { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.9rem; color: #52525b; font-family: var(--font-sans); } .contact-item i { color: var(--accent-brass); font-size: 0.95rem; margin-top: 0.25rem; } .contact-item a { text-decoration: none; color: #52525b; transition: var(--transition-fast); } .contact-item a:hover { color: var(--accent-brass); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 2.5rem; padding-right: 5.5rem; border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .footer-bottom p { font-size: 0.8rem; color: #71717a; font-family: var(--font-sans); } .footer-legal-links { display: flex; gap: 2rem; } .footer-legal-links a { text-decoration: none; color: #71717a; font-size: 0.8rem; transition: var(--transition-fast); font-family: var(--font-sans); } .footer-legal-links a:hover { color: var(--accent-brass); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Scroll Reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-visible { opacity: 1; transform: translateY(0); } /* Responsive Breakpoints */ @media (max-width: 1200px) { .hero-container { grid-template-columns: 1fr; gap: 4rem; } .hero-content { align-items: center; text-align: center; } .hero-features { justify-content: center; width: 100%; } .tours-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 950px) { .nav-links { display: none; } .menu-toggle { display: inline-flex; color: #09090b; } .services-grid { grid-template-columns: 1fr; gap: 2rem; } .fleet-grid { grid-template-columns: 1fr; gap: 2.5rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .nav-container { padding: 1.25rem 2rem; } .section { padding: 6rem 2rem; } } @media (max-width: 600px) { .hero-content h1 { font-size: 3rem; } .hero-features { grid-template-columns: 1fr; gap: 1.25rem; } .form-row { grid-template-columns: 1fr; gap: 1.25rem; } .booking-widget { padding: 2rem 1.5rem; } .section-title { font-size: 2.2rem; } .footer-grid { grid-template-columns: 1fr; } .tours-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; width: 100%; } .cta-buttons .btn-premium, .cta-buttons .btn-secondary { width: 100%; text-align: center; } } /* Floating WhatsApp Button */ .floating-whatsapp { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; background-color: #25d366; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); z-index: 999; text-decoration: none; transition: var(--transition-smooth); } .floating-whatsapp:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); } /* Subtle Pulsing Ring */ .floating-whatsapp::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #25d366; opacity: 0.8; animation: whatsapp-pulse 2s infinite ease-in-out; pointer-events: none; } @keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } } @media (max-width: 600px) { .floating-whatsapp { bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; font-size: 1.5rem; } } /* Subpage Hero Header Section */ .subpage-hero { padding: 12rem 2rem 5rem; text-align: center; background: transparent; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .subpage-hero h1 { font-size: 3.75rem; font-weight: 300; line-height: 1.1; font-family: var(--font-serif); color: var(--text-primary); } .subpage-hero p { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; font-family: var(--font-sans); } /* Route/service page stat strip (distance, duration, starting price) */ .route-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 700px; margin: 0.5rem auto 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .route-stat { padding: 1.5rem 1rem; text-align: center; border-left: 1px solid var(--border-soft); } .route-stat:first-child { border-left: none; } .route-stat strong { display: block; font-family: var(--font-serif); font-size: 2rem; font-weight: 400; color: var(--text-primary); } .route-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-family: var(--font-sans); } /* Static (non-interactive) reuse of the vehicle-card component on content pages */ .vehicle-cards.static .vehicle-card { cursor: default; } @media (max-width: 600px) { .route-stat strong { font-size: 1.5rem; } } /* Success Receipt Screen Card */ .success-container { max-width: 650px; margin: 12rem auto 8rem; padding: 0 2rem; } .success-card { background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; padding: 4rem 3.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45); color: #09090b; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .success-icon { font-size: 4rem; color: #25d366; /* checkmark green */ line-height: 1; } .success-card h2 { font-size: 2.5rem; font-weight: 300; font-family: var(--font-serif); color: #09090b; margin-bottom: 0.5rem; } .success-card p { color: #52525b; font-size: 1rem; line-height: 1.6; } .success-details { width: 100%; display: flex; flex-direction: column; gap: 1.25rem; border-top: 1px solid #e4e4e7; border-bottom: 1px solid #e4e4e7; padding: 2rem 0; margin-bottom: 1rem; } .success-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.95rem; } .success-row span { color: #71717a; font-weight: 500; font-family: var(--font-sans); } .success-row strong { color: #09090b; font-weight: 600; text-align: right; max-width: 300px; font-family: var(--font-sans); } .success-price-row { display: flex; justify-content: space-between; align-items: center; background: #f4f4f5; width: 100%; padding: 1.25rem 1.5rem; border-radius: 8px; margin-top: 0.5rem; } .success-price-row span { font-weight: 600; color: #09090b; font-family: var(--font-sans); } .success-price-row strong { font-size: 1.6rem; color: #000000; font-weight: 700; font-family: var(--font-sans); } /* Dedicated Corporate Business Card */ .business-container { max-width: 600px; margin: 4rem auto 8rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; padding: 4rem 3.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45); color: #09090b; } @media (max-width: 600px) { .subpage-hero h1 { font-size: 2.75rem; } .success-card, .business-container { padding: 2.5rem 1.5rem; } .success-row strong { max-width: 180px; } } /* Mobile Navigation Overlay Menu */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #09090b; /* premium dark background */ z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; padding: 5rem 1.5rem 2.5rem; box-sizing: border-box; } .mobile-menu-overlay.open { opacity: 1; pointer-events: auto; } .mobile-menu-close { position: absolute; top: 1.5rem; right: 2rem; background: none; border: none; color: #ffffff; /* white close button */ font-size: 2.5rem; font-weight: 300; cursor: pointer; padding: 0.5rem; line-height: 1; } .mobile-menu-links { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 2rem; padding: 0; margin: 0; } .mobile-menu-links a { text-decoration: none; font-family: var(--font-serif); font-size: 2.5rem; font-weight: 300; color: #ffffff; /* white link text */ transition: var(--transition-fast); } .mobile-menu-links a:hover { color: var(--accent-brass); /* brass color on hover */ } .mobile-menu-links a.active { color: var(--accent-brass); } /* Services / City-to-City / Day Trips: collapsible so their sub-pages are reachable on mobile without cramming everything into one flat list. */ .mobile-menu-links li.has-sub { display: flex; flex-direction: column; align-items: center; } .mobile-sub-row { display: flex; align-items: center; gap: 0.5rem; } .mobile-sub-toggle { background: none; border: none; color: var(--text-secondary); cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mobile-sub-toggle .chevron { display: inline-block; font-size: 1.1rem; transition: var(--transition-fast); } .has-sub.open .mobile-sub-toggle .chevron { transform: rotate(180deg); color: var(--accent-brass); } /* Plain show/hide via the `hidden` attribute rather than an animated max-height transition — binary and cannot get stuck half-open. */ .mobile-submenu { list-style: none; margin: 1.25rem 0 0; padding: 0; } .mobile-submenu[hidden] { display: none; } .mobile-submenu li + li { margin-top: 1rem; } .mobile-submenu a { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; color: var(--text-secondary); display: inline-block; padding: 0.4rem 0; } .mobile-submenu a:hover, .mobile-submenu a.active { color: var(--accent-brass); } .mobile-menu-actions { margin-top: 4rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 80%; max-width: 320px; } .mobile-menu-actions .btn-contact { text-decoration: none; font-weight: 500; color: #a1a1aa; /* silver/zinc subtext */ font-size: 1rem; } .mobile-menu-actions .btn-premium { width: 100%; text-align: center; } /* Hard Mobile View Refinements */ @media (max-width: 600px) { /* Hide call and book buttons on mobile header */ .nav-actions { display: none !important; } /* Make header sticky solid white on mobile */ header { position: sticky !important; top: 0 !important; background: #ffffff !important; border-bottom: 1px solid #e4e4e7 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; padding: 0.75rem 0 !important; z-index: 1000 !important; } .logo { color: #09090b !important; } .logo span { color: #52525b !important; } .menu-toggle { display: inline-flex !important; color: #09090b !important; z-index: 1200 !important; } /* Hero Spacing Stack */ .hero { min-height: auto !important; display: block !important; padding: 3rem 1.25rem !important; } .hero-container { display: flex; flex-direction: column; gap: 2rem; padding: 0; } .hero-content { padding: 0; text-align: left; /* Booking widget has order:0 below, so this pushes the headline/marketing copy after it visually — the form is the first thing on screen without scrolling, while the DOM (and screen readers) still read headline-first. */ order: 1 !important; } .hero-content h1 { font-size: 2.85rem; line-height: 1.12; letter-spacing: -0.02em; } .hero-content p { font-size: 1rem; margin-bottom: 1.5rem; } .hero-ctas { flex-direction: column; gap: 1rem; width: 100%; margin-bottom: 2rem; } .hero-ctas .btn-premium, .hero-ctas .btn-hero-link { width: 100%; justify-content: center; text-align: center; } /* Sections Margins */ .section { padding: 4.5rem 1.25rem; } .section-title { font-size: 2rem; line-height: 1.2; font-weight: 300; } /* Booking Widget — translucent glass card blended into the hero photo */ .booking-widget { order: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.18); padding: 1.5rem 1.25rem !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); background: rgba(24, 24, 27, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .booking-tabs { background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 2px; gap: 2px; margin: 0 0 0.75rem !important; /* tight bottom space */ width: 100% !important; border: none; } .tab-btn { border-radius: 7px; padding: 0.4rem 0 !important; /* compact tab height */ font-size: 0.74rem !important; font-weight: 500; color: rgba(255, 255, 255, 0.7); background: transparent; transition: all 0.2s ease; } .tab-btn.active { background-color: #ffffff; color: #000000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05); font-weight: 600; } .booking-form { gap: 0.75rem !important; /* tight grid rows space */ } .form-row { grid-template-columns: 1fr; gap: 0; background: transparent; border: none; border-radius: 0; overflow: visible; margin: 0 !important; width: 100% !important; } /* Address row group styling — stacked label-over-input with a hairline divider between fields, matching a translucent glass card. */ #address-row .form-group { flex-direction: column; align-items: stretch; padding: 0.85rem 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15); gap: 0.3rem !important; background: transparent; } #address-row .form-group:last-child { border-bottom: none; } #address-row label { width: 100% !important; font-size: 0.7rem !important; font-weight: 600; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0; } #address-row input { width: 100% !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0; /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */ font-size: 16px !important; color: #ffffff !important; box-shadow: none !important; } #address-row input::placeholder { color: rgba(255, 255, 255, 0.4); } /* Date/Time and Options side-by-side iOS native blocks (Saves vertical space) */ .form-row.date-time-row, .form-row.options-row { grid-template-columns: 1fr 1fr !important; display: grid !important; gap: 0.5rem !important; background: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; margin: 0 !important; width: 100% !important; } /* Options row (Vehicle Class + Flight Number/Hours) needs full width per field - "First Class Sedan (S-Class)" and "12 Hours (Extended)" both get clipped if squeezed into a 2-column split at this viewport, so stack instead. */ .form-row.options-row { grid-template-columns: 1fr !important; } /* Vehicle cards stack in a single column on narrow screens */ .vehicle-cards { grid-template-columns: 1fr; gap: 0.5rem; } .vehicle-card { flex-direction: row; align-items: center; } .vehicle-card-image { width: 76px; aspect-ratio: 4 / 3; flex-shrink: 0; } .vehicle-card-badge { top: 0.3rem; left: 0.3rem; font-size: 0.5rem; padding: 0.18rem 0.4rem; } .vehicle-card-body { flex: 1; min-width: 0; padding: 0.6rem 0.6rem; } .vehicle-card-info span { font-size: 0.64rem; } .booking-reassurance { font-size: 0.68rem; margin-top: 0; color: rgba(255, 255, 255, 0.5); } .form-row.date-time-row .form-group, .form-row.options-row .form-group { flex-direction: column !important; /* label on top, input below */ align-items: flex-start !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 0 !important; padding: 0.6rem 0 !important; background: transparent !important; gap: 0.3rem !important; width: 100% !important; } .form-row.date-time-row label, .form-row.options-row label { width: 100% !important; font-size: 0.65rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.55) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .form-row.date-time-row input, .form-row.options-row select, .form-row.options-row input { width: 100% !important; /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */ font-size: 16px !important; color: #ffffff !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color-scheme: dark !important; } .form-row.options-row select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cba876' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0 center !important; background-size: 1.1em !important; padding-right: 1.25rem !important; } #route-row { border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0; background: transparent; overflow: visible; margin: 0 !important; width: 100% !important; } #route-row .form-group { flex-direction: row; align-items: center; padding: 0.65rem 0.85rem !important; gap: 0.75rem !important; } #route-row label { width: 32%; font-size: 0.82rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); text-transform: none; letter-spacing: normal; margin-bottom: 0; } #route-row select { width: 68%; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0; font-size: 0.88rem; color: #ffffff !important; box-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color-scheme: dark; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cba876' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0 center !important; background-size: 1.1em !important; padding-right: 1.25rem !important; } /* Hourly tab's "Hours Required" field — a standalone .form-group, not wrapped by #route-row/#address-row, so it needs its own dark-glass styling. */ #hours-row { border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 0.6rem 0 !important; margin: 0 !important; width: 100% !important; } #hours-row label { width: 100% !important; font-size: 0.65rem !important; font-weight: 600; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0; } #hours-row select { width: 100% !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0; font-size: 16px !important; color: #ffffff !important; box-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color-scheme: dark; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cba876' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0 center !important; background-size: 1.1em !important; padding-right: 1.25rem !important; } .estimate-box { background: #ffffff; border: 0.5px solid #c6c6c8; border-radius: 10px; padding: 0.75rem 0.85rem !important; /* compact estimate */ margin: 0 !important; width: 100% !important; display: flex; justify-content: space-between; align-items: center; } .est-details span, .est-price span { font-size: 0.62rem !important; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.02em; } .est-details strong { font-size: 0.85rem !important; color: #000000; } .est-price h3 { font-size: 1.4rem !important; color: #000000; } .btn-submit-booking { margin: 0.25rem 0 0 !important; /* tight button margin */ width: 100% !important; padding: 0.75rem 1.2rem !important; /* tight button padding */ font-size: 0.88rem !important; /* A solid black CTA nearly disappears against the dark glass card, so use the brand gold accent here instead — it's the highest-contrast, on-brand option against a dark translucent background. */ background: linear-gradient(135deg, #cba876 0%, #b3966b 100%) !important; color: #0f1319 !important; } /* Features Banner */ .features-banner { padding: 3rem 1.25rem; } .features-banner-container { grid-template-columns: 1fr !important; gap: 1.75rem !important; padding: 1rem 0 !important; } .feat-banner-item h3 { font-size: 1.1rem !important; } .feat-banner-item p { font-size: 0.85rem !important; } /* Cards Grid (Use Cases) Mobile Overrides */ .cards-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } .card-item { padding: 1.75rem !important; min-height: auto !important; } /* Testimonial Slides Stack */ .section.testimonials { padding: 3.5rem 1.25rem !important; } .testimonial-text { font-size: 1.25rem !important; line-height: 1.5; } .slider-dots { margin-top: 2rem !important; } /* B2B CTA Banner Mobile Overrides */ .cta-banner { padding: 3.5rem 1.25rem !important; } .cta-container { gap: 1.5rem !important; } .cta-container h2 { font-size: 1.85rem !important; line-height: 1.25; } .cta-container p { font-size: 0.95rem !important; line-height: 1.5; } .cta-buttons { flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } .cta-buttons .btn-premium, .cta-buttons .btn-secondary { width: 100% !important; text-align: center !important; padding: 0.8rem 0 !important; } /* Footer Mobile Overrides */ .footer-grid { grid-template-columns: 1fr !important; gap: 2.25rem !important; } .footer-bottom { flex-direction: column !important; gap: 1.25rem !important; text-align: center !important; /* extra bottom space so the floating WhatsApp button never covers the legal links */ padding: 2rem 0 5.5rem !important; } .footer-legal-links { justify-content: center !important; gap: 1rem !important; } /* Float WhatsApp adjustments */ .floating-whatsapp { bottom: 1.25rem; right: 1.25rem; width: 50px; height: 50px; font-size: 1.6rem; } } /* Premium Cookie Consent Banner */ .cookie-banner { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); width: calc(100% - 3rem); max-width: 550px; background: rgba(15, 15, 18, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; z-index: 2500; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; } .cookie-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .cookie-content p { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } .cookie-content a { color: var(--text-primary); text-decoration: underline; transition: var(--transition-fast); } .cookie-content a:hover { color: var(--accent-brass); } .btn-cookie-accept { background: #ffffff; color: #000000; border: none; border-radius: 9999px; padding: 0.5rem 1.25rem; position: relative; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); white-space: nowrap; } .btn-cookie-accept:hover { background: var(--accent-brass); color: #000000; } /* Invisible tap-area extension to meet the 44px touch guideline */ .btn-cookie-accept::after { content: ''; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; } @media (max-width: 600px) { .cookie-banner { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem; bottom: 1rem; width: calc(100% - 1.5rem); } .btn-cookie-accept { width: 100%; text-align: center; } } /* Breadcrumb trail on subpages (visible counterpart of BreadcrumbList schema) */ .breadcrumbs { max-width: 1200px; margin: 0 auto; padding: 1.1rem 1.5rem 0; font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .breadcrumbs a { color: var(--text-secondary); text-decoration: none; transition: var(--transition-fast); } .breadcrumbs a:hover { color: var(--text-primary); } .breadcrumbs [aria-current] { color: var(--text-primary); } .crumb-sep { opacity: 0.5; } /* Route map on booking.html — hidden until the Google Maps key is configured in app.js and a drivable route is returned */ .route-map-card { border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem; background: var(--bg-card); } #route-map { width: 100%; height: 280px; } .route-map-stats { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-secondary); padding: 0.75rem 1rem; margin: 0; border-top: 1px solid var(--border-soft); } @media (max-width: 600px) { #route-map { height: 220px; } } /* ============================================================ Mobile device hardening (real-device behaviors) ============================================================ */ /* iOS Safari zooms the whole page when focusing any form control whose font-size is under 16px. Enforce 16px on all controls at phone widths so tapping a field never triggers the zoom jump. (ID-specific booking rules above already set 16px; this catches every other input site-wide.) */ @media (max-width: 600px) { input, select, textarea { font-size: 16px !important; } /* Keep floating elements clear of the iPhone home indicator / notch safe areas. env() resolves to 0 on devices without insets. */ .floating-whatsapp { bottom: calc(1.25rem + env(safe-area-inset-bottom)); right: calc(1.25rem + env(safe-area-inset-right)); } .cookie-banner { bottom: calc(1rem + env(safe-area-inset-bottom)); } }