/* ============================================================ TransfersX Cream Theme Override (was Dark Theme — converted) Blacklane-inspired cream/light theme for all secondary pages ============================================================ */ /* Base */ body { background: #f6f4ee !important; color: #1a1a1a !important; /* deep warm-near-black for body */ padding-top: 64px !important; font-family: 'Manrope', 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important; font-feature-settings: "ss01", "cv11" !important; /* OpenType refinement if available */ -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } strong { color: #0a0a0a !important; font-weight: 700 !important; } /* Hide announcement bar / topbar */ .announcement-bar, .topbar { display: none !important; } /* ── NAV ── */ .header-stack { position: fixed !important; top: 0; left: 0; right: 0; z-index: 200; background: rgba(246,244,238,0.92) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,0.06) !important; } /* Dark logo (revert filter) */ .nav .logo img, .header-stack .logo img { filter: none !important; } /* Nav links */ .nav-links a { color: #555 !important; } .nav-links a:hover, .nav-links a.active { color: #0b0b0b !important; } /* Nav phone */ .nav-phone { color: #555 !important; } .nav-phone:hover { color: #0b0b0b !important; } /* Nav CTA pill */ .nav-cta { background: #0b0b0b !important; color: #fff !important; border-color: #0b0b0b !important; border-radius: 50px !important; } .nav-cta:hover { background: #222 !important; } /* Mobile menu toggle */ .menu-toggle span { background: #0b0b0b !important; } /* Mobile menu */ .mobile-menu { background: #f6f4ee !important; border-top: 1px solid rgba(0,0,0,0.06) !important; } .mobile-menu a { color: #333 !important; border-bottom-color: rgba(0,0,0,0.05) !important; } .mobile-menu a:hover { color: #0b0b0b !important; background: rgba(0,0,0,0.03) !important; } /* ── PAGE HERO ── */ .page-hero { padding-top: 64px; } .page-hero::before { background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%) !important; } .page-hero h1, .page-hero .h-display { color: #fff !important; } .page-hero p { color: rgba(255,255,255,0.85) !important; } .page-hero .eyebrow { color: rgba(255,255,255,0.75) !important; } /* ─────────────────────────────────────────────────────────────────────────── HERO-NAV — homepage-style header for inner hero pages. Pages with get a transparent header + white logo floating over the page-hero (matching index.html), which turns into a solid dark bar once the user scrolls past the hero. main.js toggles .is-fixed for these pages just like it does for .page-home. ─────────────────────────────────────────────────────────────────────────── */ body.hero-nav { padding-top: 0 !important; } /* let the hero sit behind the header */ /* Transparent header while over the hero */ body.hero-nav .header-stack { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; } /* Solid dark bar after scrolling past the hero */ body.hero-nav .header-stack.is-fixed { background: rgba(11,11,11,0.94) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* White logo in both states (matches homepage) */ body.hero-nav .nav .logo img, body.hero-nav .header-stack .logo img { filter: brightness(0) invert(1) !important; } /* White nav text over the hero / dark bar */ body.hero-nav .nav-links a { color: rgba(255,255,255,0.85) !important; } body.hero-nav .nav-links a:hover, body.hero-nav .nav-links a.active { color: #fff !important; } body.hero-nav .nav-phone { color: rgba(255,255,255,0.85) !important; } body.hero-nav .nav-phone:hover { color: #fff !important; } body.hero-nav .menu-toggle span { background: #fff !important; } /* Outline CTA pill, like the homepage */ body.hero-nav .nav-cta { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.55) !important; } body.hero-nav .nav-cta:hover { background: #fff !important; color: #0b0b0b !important; border-color: #fff !important; } /* Keep the hero headline clear of the overlapping fixed header */ body.hero-nav .page-hero { padding-top: 104px !important; } /* ── SECTIONS ── */ .section { background: #f6f4ee !important; } .section-dark { background: #f0ede5 !important; } /* ── TYPOGRAPHY ── Premium tones for cream background ── */ h1, h2, h3, h4, h5, h6 { color: #0a0a0a !important; /* near-black confidence */ font-family: 'Manrope', sans-serif !important; letter-spacing: -0.01em !important; } h1, h2 { letter-spacing: -0.02em !important; font-weight: 700 !important; } h3 { font-weight: 700 !important; } h4 { font-weight: 600 !important; } p { color: #3a3a3a !important; /* warm dark grey — readable, not stark */ line-height: 1.65 !important; } .eyebrow { color: #8a7e6a !important; /* warm muted taupe — premium accent */ letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 700 !important; } .lead { color: #2a2a2a !important; font-weight: 500 !important; } /* ── SECTION HEADERS ── */ .section-header p, .flex-between p { color: #555 !important; } /* ── CARDS ── Premium look ── */ .card { background: #ffffff !important; border: 1px solid #e8e2d5 !important; /* subtle warm border to harmonise with cream */ color: #1a1a1a !important; box-shadow: 0 1px 3px rgba(60,40,20,0.04), 0 8px 32px rgba(60,40,20,0.06) !important; } .card-body p { color: #3a3a3a !important; } .card:hover { border-color: #d8cfbb !important; box-shadow: 0 2px 8px rgba(60,40,20,0.06), 0 12px 40px rgba(60,40,20,0.08) !important; } /* ── SERVICE CARDS ── */ .service-card { background: #ffffff !important; border: 1px solid #e8e2d5 !important; box-shadow: 0 1px 3px rgba(60,40,20,0.04), 0 8px 32px rgba(60,40,20,0.06) !important; } .service-body h3 { color: #0a0a0a !important; } .service-body p { color: #3a3a3a !important; } /* ── FLEET ROWS ── */ .fleet-row { background: #ffffff !important; border-color: #e8e2d5 !important; box-shadow: 0 1px 3px rgba(60,40,20,0.03), 0 6px 24px rgba(60,40,20,0.05) !important; } .fleet-row.featured { background: #fafaf5 !important; } .fleet-info h3 { color: #0a0a0a !important; } .fleet-info p { color: #3a3a3a !important; } /* ── BUTTONS ── */ .btn { border-radius: 50px !important; } .btn-arrow, .btn-outline { border-color: #0b0b0b !important; color: #0b0b0b !important; background: transparent !important; } .btn-arrow:hover, .btn-outline:hover { background: #0b0b0b !important; color: #fff !important; border-color: #0b0b0b !important; } /* ── LINKS ── */ .link-underline { color: #333 !important; border-color: rgba(0,0,0,0.25) !important; } .link-underline:hover { color: #0b0b0b !important; } /* ── DIVIDERS / BORDERS ── */ hr, .border, [class*="border-top"], [class*="border-bottom"] { border-color: #ececec !important; } /* ── STATS ── */ .stat-num { color: #0a0a0a !important; font-weight: 800 !important; } .stat-label { color: #8a7e6a !important; /* warm taupe — same as eyebrow */ letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 600 !important; } /* ── HIGHLIGHTS BAR ── */ .highlights-bar { background: #ffffff !important; border-color: #e8e2d5 !important; box-shadow: 0 1px 3px rgba(60,40,20,0.04), 0 8px 32px rgba(60,40,20,0.06) !important; } .highlight-text strong { color: #0a0a0a !important; } .highlight-text span { color: #4a4a4a !important; } /* ── CITIES LIST ── */ .cities-list li { border-color: #e8e2d5 !important; color: #0a0a0a !important; } .cities-list .num { color: #c7baa3 !important; /* very subtle warm taupe */ font-weight: 700 !important; } /* ── TOUR CARDS ── */ .tour-card { background: #ffffff !important; border-color: #e8e2d5 !important; box-shadow: 0 1px 3px rgba(60,40,20,0.04), 0 8px 32px rgba(60,40,20,0.06) !important; } .tour-card h3 { color: #0a0a0a !important; } .tour-card p { color: #3a3a3a !important; } /* ── FOOTER ── Premium warm ── */ .footer { background: #1a1611 !important; /* deep warm near-black for contrast */ border-top: 1px solid #2a2520 !important; color: rgba(255,255,255,0.7) !important; } .footer h4 { color: #fff !important; letter-spacing: 0.04em !important; } .footer a { color: rgba(255,255,255,0.6) !important; } .footer a:hover { color: #fff !important; } .footer-tagline { color: rgba(255,255,255,0.55) !important; } .footer-bottom { color: rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.08) !important; } .footer .logo img { filter: brightness(0) invert(1) !important; /* white logo on dark footer */ }