/* ============================================================ Luxe On Wheels — core stylesheet (dark + light themes) ============================================================ */ :root { --gold: #c9a227; --gold-soft: #e6c65c; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; } /* Bootstrap theme variable overrides — dark (default) */ [data-bs-theme="dark"] { --bs-body-bg: #0d0f12; --bs-body-color: #e8e6e1; --bs-tertiary-bg: #16191e; --bs-secondary-bg: #1b1f26; --bs-border-color: #2a2f38; --bs-emphasis-color: #fff; --surface: #14171c; --surface-2: #1b1f26; --hero-overlay: linear-gradient(115deg, rgba(9,10,12,.92) 0%, rgba(9,10,12,.55) 55%, rgba(9,10,12,.2) 100%); } [data-bs-theme="light"] { --bs-body-bg: #f7f5f0; --bs-body-color: #23262b; --bs-tertiary-bg: #fff; --bs-secondary-bg: #efece4; --bs-border-color: #e2ddd0; --surface: #ffffff; --surface-2: #f3f0e8; --hero-overlay: linear-gradient(115deg, rgba(20,18,14,.85) 0%, rgba(30,26,20,.5) 55%, rgba(40,34,26,.15) 100%); } * { scroll-behavior: smooth; } /* Base colour sits on so the fixed car layer can show behind a transparent public (admin keeps its own solid body background). */ html { background: var(--page-bg, #06070a); } [data-bs-theme="light"] html { background: var(--page-bg, #e9e5db); } body { font-family: var(--font-body); background: var(--bs-body-bg); color: var(--bs-body-color); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } /* ---------- Cinematic blurred exotic-car backdrop (public site only) ---------- */ .has-car-bg { background: transparent !important; } .site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* Image, blur and overlay darkness are driven by CSS custom properties set inline on .site-bg from Admin → Settings (with these sensible fallbacks). */ .site-bg::before { content: ""; position: absolute; inset: -6%; background: var(--site-bg-image, url("../images/body-bg.svg")) center center / cover no-repeat; filter: blur(var(--site-bg-blur, 8px)) saturate(1.12) brightness(1.02); transform: scale(1.08); } /* Readability overlay + gold ambience layered on top of the blurred car. */ .site-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 72% 20%, rgba(201,162,39,0.16), transparent 58%), linear-gradient(180deg, rgba(6,7,10,var(--site-bg-dark-top,0.48)) 0%, rgba(6,7,10,var(--site-bg-dark-mid,0.58)) 55%, rgba(4,5,8,var(--site-bg-dark-bot,0.80)) 100%); } [data-bs-theme="light"] .site-bg::before { filter: blur(var(--site-bg-blur,8px)) saturate(1) brightness(1.18); } [data-bs-theme="light"] .site-bg::after { background: radial-gradient(120% 80% at 72% 20%, rgba(201,162,39,0.12), transparent 58%), linear-gradient(180deg, rgba(240,237,229,0.62) 0%, rgba(238,234,225,0.72) 55%, rgba(233,229,219,0.86) 100%); } /* Let the backdrop breathe: alternating sections turn translucent, and cards gain a subtle frosted-glass finish so the car glows around the content. */ .has-car-bg .section-alt { background: color-mix(in srgb, var(--surface-2) 78%, transparent); } .has-car-bg .card { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .has-car-bg .stats-band, .has-car-bg .footer-newsletter { background: color-mix(in srgb, var(--surface-2) 82%, transparent); } @supports not (background: color-mix(in srgb, red, blue)) { .has-car-bg .card { background: var(--surface); } } main { flex: 1 0 auto; } .font-display { font-family: var(--font-display); } .text-gold { color: var(--gold) !important; } .bg-gold { background: var(--gold) !important; } .ls-1 { letter-spacing: .08em; } .ls-2 { letter-spacing: .18em; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-soft); } .price { color: var(--gold); font-weight: 700; font-family: var(--font-display); } .lead-quiet { font-size: 1.1rem; color: var(--bs-secondary-color); line-height: 1.8; } /* Buttons */ .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--primary-strong) 100%); border: none; color: var(--on-primary); font-weight: 600; box-shadow: 0 4px 14px rgba(201,162,39,.28); transition: transform .15s, box-shadow .15s; } .btn-gold:hover { color: var(--on-primary); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(201,162,39,.42); } .btn-outline-gold { border: 1px solid var(--gold); color: var(--gold); background: transparent; transition: all .15s; } .btn-outline-gold:hover { background: var(--gold); color: var(--on-primary); } .btn-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); background: transparent; } .btn-icon:hover { border-color: var(--gold); color: var(--gold); } /* Cards / surfaces */ .card { background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: var(--card-radius, 1rem); transition: transform .2s, box-shadow .2s, border-color .2s; } .section { padding: 5rem 0; } .section-alt { background: var(--surface-2); } .section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); } /* Header */ .site-header { position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent); border-bottom: 1px solid var(--bs-border-color); } .navbar { padding: .65rem 0; } .brand-mark { color: var(--gold); font-size: 1.3rem; margin-right: .35rem; } .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .3px; color: var(--bs-emphasis-color); } .brand-logo { max-height: 96px; width: auto; display: block; object-fit: contain; } @media (max-width: 991.98px) { .brand-logo { max-height: 72px; } } @media (max-width: 575.98px) { .brand-logo { max-height: 60px; } } .admin-brand .brand-logo { max-height: 58px; } .site-footer .brand-logo { max-height: 68px; } /* Theme-adaptive logo: show the dark-bg (ivory) mark by default, the light-bg (charcoal) mark when the light theme is active. */ .brand-logo-light { display: none; } [data-bs-theme="light"] .brand-logo-dark { display: none; } [data-bs-theme="light"] .brand-logo-light { display: block; } .navbar-brand { display: inline-flex; align-items: center; } .nav-link { color: var(--bs-body-color); font-weight: 500; position: relative; } .nav-link:hover, .nav-link.active { color: var(--gold); } .nav-link.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 2px; height: 2px; background: var(--gold); border-radius: 2px; } .theme-icon-light { display: none; } .theme-icon-dark { display: inline; } [data-bs-theme="light"] .theme-icon-light { display: inline; } [data-bs-theme="light"] .theme-icon-dark { display: none; } /* Flash messages */ .flash-stack { position: fixed; top: 80px; right: 20px; z-index: 1080; max-width: 380px; width: calc(100% - 40px); } /* Hero */ .hero { position: relative; min-height: 88vh; padding: 7rem 0 4rem; overflow: hidden; } /* The hero sits over the shared fixed car backdrop — just darken the left (for the headline) and fade the bottom into the page. */ .hero-bg { position: absolute; inset: 0; background: var(--hero-overlay), linear-gradient(180deg, rgba(6,7,10,0) 45%, rgba(6,7,10,0.85) 100%); } [data-bs-theme="light"] .hero-bg { background: var(--hero-overlay), linear-gradient(180deg, rgba(233,229,219,0) 45%, rgba(233,229,219,0.9) 100%); } .hero-title { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; line-height: 1.05; color: #fff; } .hero-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 620px; margin: 1.2rem 0 2rem; } .hero-kicker { font-size: .85rem; } .booking-widget { background: var(--surface); border-radius: 1.25rem; } .booking-widget .form-label { color: var(--bs-secondary-color); font-weight: 600; } /* Vehicle cards */ .vehicle-card { overflow: hidden; } .vehicle-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.28); border-color: var(--gold); } .vehicle-card-media { position: relative; overflow: hidden; } .vehicle-card-media img { aspect-ratio: 16/10; object-fit: cover; transition: transform .5s; width: 100%; } .vehicle-card:hover .vehicle-card-media img { transform: scale(1.06); } .availability-badge { position: absolute; top: .75rem; left: .75rem; font-weight: 500; } .compare-toggle { position: absolute; top: .6rem; right: .6rem; width: 38px; height: 38px; background: rgba(0,0,0,.5); color: #fff; border: none; backdrop-filter: blur(4px); } .compare-toggle.active { background: var(--gold); color: var(--on-primary); } .vehicle-card-list .vehicle-card-media img { height: 100%; min-height: 200px; } .vehicle-specs li { white-space: nowrap; } .card-title a { color: var(--bs-emphasis-color); } .card-title a:hover { color: var(--gold); } /* Type / step / why cards */ .type-card:hover { border-color: var(--gold); transform: translateY(-3px); } .type-card .card-body { color: var(--bs-body-color); } .why-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(201,162,39,.12); color: var(--gold); font-size: 1.3rem; } .step-card { background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 2rem 1.25rem; position: relative; } .step-number { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; background: var(--gold); color: var(--on-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; } /* Offers */ .offer-card { overflow: hidden; } .offer-card:hover { border-color: var(--gold); } .coupon-chip { display: inline-flex; align-items: center; border: 1px dashed var(--gold); color: var(--gold); border-radius: .5rem; padding: .35rem .75rem; font-weight: 600; letter-spacing: .05em; cursor: pointer; } /* Stats */ .stats-band { background: var(--surface-2); } .counter { color: var(--gold); } /* Testimonials */ .testimonial-card blockquote { line-height: 1.7; } /* Brand strip */ .brand-chip { font-family: var(--font-display); font-size: 1.1rem; color: var(--bs-secondary-color); padding: .35rem .75rem; opacity: .8; transition: all .2s; } .brand-chip:hover { color: var(--gold); opacity: 1; } /* Horizontal scroller */ .hscroll { display: flex; gap: 1.5rem; overflow-x: auto; padding: .5rem .25rem 1.5rem; scroll-snap-type: x mandatory; } .hscroll-item { flex: 0 0 320px; max-width: 320px; scroll-snap-align: start; } .hscroll::-webkit-scrollbar { height: 8px; } .hscroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; } /* Page hero */ .page-hero { padding: 3rem 0 1rem; background: var(--surface-2); border-bottom: 1px solid var(--bs-border-color); } .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); } .breadcrumb a { color: var(--bs-secondary-color); } /* Filter panel */ .filter-panel { border-radius: 1rem; } /* Gallery / vehicle detail */ /* 8/5 matches the seeded artwork (800×500) so the caption band never crops; contain + dark backdrop letterboxes any off-ratio real photo without cutting it. */ .gallery { position: relative; } .gallery-main { aspect-ratio: 8/5; object-fit: contain; background: #0c0e12; } .gallery-main.no-save { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; } /* Transparent layer over the image to blunt long-press / drag saving. */ .gallery-guard { position: absolute; inset: 0; z-index: 2; border-radius: 1rem; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: rgba(0, 0, 0, .5); color: #fff; transition: background .15s, color .15s; } .gallery-nav:hover { background: var(--gold); color: #1a1300; } .gallery-prev { left: 12px; } .gallery-next { right: 12px; } .gallery-counter { position: absolute; bottom: 12px; right: 14px; z-index: 3; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; padding: 2px 10px; border-radius: 20px; } .placeholder-tile { font-size: 1.2rem; } .spec-tile { border-radius: .75rem; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; } .booking-sidebar { border-radius: 1rem; border-color: var(--gold); } .map-placeholder { background: var(--surface-2); border: 1px dashed var(--bs-border-color); min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--bs-secondary-color); text-align: center; } .map-placeholder .bi { font-size: 2rem; color: var(--gold); } /* Insurance / extras / payment options */ .insurance-option, .extra-option, .payment-option { cursor: pointer; border: 1px solid var(--bs-border-color); transition: border-color .15s, background .15s; } .insurance-option:has(input:checked), .extra-option:has(input:checked), .payment-option:has(input:checked) { border-color: var(--gold); background: rgba(201,162,39,.06); } /* Booking steps */ .booking-steps .step { color: var(--bs-secondary-color); } .booking-steps .step.active { color: var(--gold); font-weight: 700; } .booking-steps .step.done { color: var(--bs-body-color); } .confirm-icon { width: 90px; height: 90px; border-radius: 50%; background: rgba(40,167,69,.15); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; } /* Auth */ .auth-section { padding: 4rem 0; } /* Account */ .account-sidebar { position: sticky; top: 90px; } .account-nav .nav-link { color: var(--bs-body-color); border-radius: .5rem; padding: .55rem .75rem; display: flex; align-items: center; } .account-nav .nav-link:hover { background: var(--surface-2); } .account-nav .nav-link.active { background: rgba(201,162,39,.14); color: var(--gold); } .avatar-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--gold); overflow: hidden; } .stat-tile { border-radius: .85rem; } .wallet-hero { background: linear-gradient(135deg, rgba(201,162,39,.12), transparent); border-color: var(--gold); } .notification-item.unread { background: rgba(201,162,39,.06); } .tier-card { border-radius: 1rem; } .tier-featured { border-color: var(--gold); box-shadow: 0 8px 30px rgba(201,162,39,.15); } /* Tickets */ .ticket-msg.staff { flex-direction: row-reverse; text-align: right; } .ticket-bubble { background: var(--surface-2); padding: .75rem 1rem; border-radius: .75rem; display: inline-block; } .ticket-msg.staff .ticket-bubble { background: rgba(201,162,39,.12); } /* Blog */ .blog-card:hover, .blog-mini:hover { border-color: var(--gold); transform: translateY(-3px); } .blog-card .card-title a { color: var(--bs-emphasis-color); } .cms-body { line-height: 1.9; } .cms-body h2, .cms-body h3 { font-family: var(--font-display); margin-top: 1.75rem; } .cms-body img { max-width: 100%; border-radius: .75rem; } /* Footer */ .site-footer { background: var(--surface-2); border-top: 1px solid var(--bs-border-color); margin-top: 4rem; } .footer-heading { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--gold); margin-bottom: 1rem; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: .5rem; } .footer-links a { color: var(--bs-secondary-color); } .footer-links a:hover { color: var(--gold); } .footer-newsletter { background: var(--surface); border: 1px solid var(--bs-border-color); } .footer-bottom { border-top: 1px solid var(--bs-border-color); } /* Animations */ .fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp .7s forwards; } .fade-up:nth-child(2) { animation-delay: .1s; } .fade-up:nth-child(3) { animation-delay: .2s; } .booking-widget.fade-up { animation-delay: .3s; } @keyframes fadeUp { to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fade-up, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* Compare table */ .compare-table th, .compare-table td { border-color: var(--bs-border-color); } /* Compare — premium, readable side-by-side layout. */ .compare-wrap { border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: auto; max-height: 82vh; } .compare-table { border-collapse: separate; border-spacing: 0; margin: 0; } .compare-table thead th { position: sticky; top: 0; z-index: 3; vertical-align: top; background: var(--surface); padding: 1rem .85rem 1.1rem; border-bottom: 1px solid var(--bs-border-color); } .compare-table th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--bs-body-bg); min-width: 150px; font-weight: 600; white-space: nowrap; } .compare-table thead th.compare-corner { left: 0; z-index: 4; min-width: 150px; } .compare-table td { min-width: 210px; padding: .85rem; } .compare-table tbody tr td, .compare-table tbody tr th[scope="row"] { border-bottom: 1px solid var(--bs-border-color); } .compare-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 55%, transparent); } .compare-table tbody tr:hover td { background: rgba(201, 162, 39, .07); } .compare-head-media { border-radius: .7rem; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); } .compare-head-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .compare-head a.h6 { color: var(--bs-emphasis-color); } .compare-head a.h6:hover { color: var(--gold); } .compare-row-price td { background: rgba(201, 162, 39, .1) !important; } .compare-row-price td .price { font-size: 1.35rem; } .compare-row-price th[scope="row"] { color: var(--gold) !important; } /* Accessibility */ .visually-hidden-focusable:focus { position: fixed; top: 10px; left: 10px; z-index: 2000; background: var(--gold); color: var(--on-primary); padding: .5rem 1rem; border-radius: .5rem; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (max-width: 991px) { .hero { min-height: auto; padding-top: 5rem; } .section { padding: 3rem 0; } .account-sidebar, .filter-panel.sticky-lg-top, .booking-sidebar.sticky-lg-top { position: static; } }