/* ================================================================ MEDINA CARS — FÈS — Boutique traditional override theme Layered ON TOP of atlas-auto.css via Palette: Papier-sable cream + Terracotta + Indigo Méditerranée Feel: slow travel, hand-crafted, vintage-friendly, warm ================================================================ */ body.theme-medina { /* Palette override — light, warm, inviting */ --bg: #F5EFE3; /* sandy paper */ --surface: #FFFFFF; /* cards */ --surface-2: #FBF6EA; /* elevated cards */ --surface-3: #EFE6D2; /* inputs, hover */ --border: rgba(46, 51, 77, 0.10); --border-strong: rgba(46, 51, 77, 0.22); --text: #1F2439; /* deep indigo instead of off-white */ --text-muted: #5A5F78; --text-dim: #8A8FA3; /* Accent: terracotta instead of gold */ --gold: #C65D3A; --gold-bright: #E07650; --gold-deep: #9B4424; --gold-glow: rgba(198, 93, 58, 0.28); /* Secondary accent for highlights: indigo Méditerranée */ --indigo: #2E334D; --indigo-soft: #4A5079; --danger: #B83A2C; /* Softer shadows on a light background */ --shadow-sm: 0 2px 8px rgba(46, 51, 77, 0.06); --shadow: 0 10px 30px rgba(46, 51, 77, 0.10); --shadow-lg: 0 24px 60px rgba(46, 51, 77, 0.14); --shadow-gold: 0 12px 36px rgba(198, 93, 58, 0.22); } /* Body background gets a subtle woven-paper texture via gradient */ body.theme-medina { background: radial-gradient(ellipse 1200px 600px at 20% 0%, rgba(198, 93, 58, 0.06), transparent 60%), radial-gradient(ellipse 900px 500px at 100% 20%, rgba(46, 51, 77, 0.05), transparent 60%), #F5EFE3; } /* Navbar: warm cream with a subtle terracotta rule under */ body.theme-medina .navbar { background: rgba(245, 239, 227, 0.85); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(46, 51, 77, 0.08); } body.theme-medina .nav-links a { color: var(--text); opacity: 0.72; } body.theme-medina .nav-links a:hover { color: var(--gold); opacity: 1; } /* Brand mark — terracotta tile instead of gold */ body.theme-medina .brand__mark { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #FFF8EE; box-shadow: 0 4px 14px rgba(198, 93, 58, 0.35); } body.theme-medina .brand__text { color: var(--text); } body.theme-medina .brand__text span { color: var(--gold); } /* Hero: lighter, with traditional Moroccan zellige-inspired gradient */ body.theme-medina .hero { background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(198, 93, 58, 0.16), transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, rgba(46, 51, 77, 0.10), transparent 60%), linear-gradient(180deg, #FBF6EA 0%, #F5EFE3 100%); } body.theme-medina .hero__bg { opacity: 0.4; } body.theme-medina .hero h1 { color: var(--text); } body.theme-medina .hero h1 .accent { color: var(--gold); } body.theme-medina .hero__sub { color: var(--text-muted); } body.theme-medina .hero__eyebrow { background: rgba(46, 51, 77, 0.06); color: var(--indigo); border: 1px solid rgba(46, 51, 77, 0.12); } body.theme-medina .hero__eyebrow .dot { background: var(--gold); } body.theme-medina .hero__stat strong { color: var(--text); } body.theme-medina .hero__stat span { color: var(--text-muted); } /* Buttons */ body.theme-medina .btn--primary { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #FFF8EE; box-shadow: 0 6px 20px rgba(198, 93, 58, 0.3); } body.theme-medina .btn--primary:hover { background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%); box-shadow: 0 10px 30px rgba(198, 93, 58, 0.45); } body.theme-medina .btn--ghost-light { color: var(--indigo); border: 1px solid rgba(46, 51, 77, 0.25); background: transparent; } body.theme-medina .btn--ghost-light:hover { background: var(--surface-2); border-color: var(--gold); color: var(--gold-deep); } /* Booking bar */ body.theme-medina .booking { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } body.theme-medina .booking__field label { color: var(--text-muted); } body.theme-medina .booking__field select, body.theme-medina .booking__field input { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } /* Sections */ body.theme-medina .why, body.theme-medina .fleet, body.theme-medina .how, body.theme-medina .testimonials, body.theme-medina .faq, body.theme-medina .final-cta { background: transparent; } body.theme-medina .why { background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.6) 100%); } body.theme-medina .fleet { background: var(--surface-2); } body.theme-medina .testimonials { background: #EFE6D2; } body.theme-medina .section-head h2 { color: var(--text); } body.theme-medina .section-head h2 .accent { color: var(--gold); } body.theme-medina .section-head p { color: var(--text-muted); } body.theme-medina .eyebrow { color: var(--indigo); background: rgba(46, 51, 77, 0.06); border: 1px solid rgba(46, 51, 77, 0.1); } /* Why cards */ body.theme-medina .why-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } body.theme-medina .why-card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-4px); } body.theme-medina .why-card__icon { background: rgba(198, 93, 58, 0.12); color: var(--gold); } body.theme-medina .why-card h3 { color: var(--text); } body.theme-medina .why-card p { color: var(--text-muted); } /* Car cards */ body.theme-medina .car-card { background: var(--surface); border: 1px solid var(--border); } body.theme-medina .car-card:hover { border-color: var(--gold); box-shadow: var(--shadow); } body.theme-medina .car-card h3 { color: var(--text); } body.theme-medina .car-card__type { color: var(--text-muted); } body.theme-medina .car-card__spec { color: var(--text-muted); } body.theme-medina .car-card__badge { background: var(--gold); color: #FFF8EE; } body.theme-medina .car-card__rating { color: var(--gold); } body.theme-medina .car-card__price strong { color: var(--text); } body.theme-medina .car-card__price .currency { color: var(--gold); } body.theme-medina .car-card__price span { color: var(--text-muted); } body.theme-medina .car-card__btn { background: var(--gold); color: #FFF8EE; } body.theme-medina .car-card__btn:hover { background: var(--gold-bright); } body.theme-medina .car-card__fav { color: var(--text-muted); background: rgba(255,255,255,0.85); border: 1px solid var(--border); } body.theme-medina .car-card__fav:hover { color: var(--gold); } /* How-it-works */ body.theme-medina .step { background: var(--surface); border: 1px solid var(--border); } body.theme-medina .step__num { color: var(--gold); } /* Testimonials */ body.theme-medina .testimonial { background: var(--surface); border: 1px solid var(--border); } body.theme-medina .testimonial__quote { color: var(--text); } body.theme-medina .testimonial__author { color: var(--text-muted); } body.theme-medina .testimonial__stars { color: var(--gold); } /* FAQ */ body.theme-medina .faq__item { background: var(--surface); border: 1px solid var(--border); } body.theme-medina .faq__item summary { color: var(--text); } body.theme-medina .faq__item p { color: var(--text-muted); } /* Final CTA */ body.theme-medina .final-cta { background: linear-gradient(135deg, var(--indigo) 0%, #1A1F33 100%); color: #F5EFE3; } body.theme-medina .final-cta h2 { color: #F5EFE3; } body.theme-medina .final-cta h2 .accent { color: var(--gold-bright); } body.theme-medina .final-cta p { color: rgba(245, 239, 227, 0.75); } body.theme-medina .final-cta .eyebrow { background: rgba(245, 239, 227, 0.1); color: var(--gold-bright); border-color: rgba(245, 239, 227, 0.2); } /* Footer */ body.theme-medina .footer { background: var(--indigo); color: rgba(245, 239, 227, 0.75); border-top: 1px solid rgba(245, 239, 227, 0.1); } body.theme-medina .footer h4 { color: #F5EFE3; } body.theme-medina .footer a { color: rgba(245, 239, 227, 0.75); } body.theme-medina .footer a:hover { color: var(--gold-bright); } body.theme-medina .footer__bottom { color: rgba(245, 239, 227, 0.5); } body.theme-medina .footer .brand__text { color: #F5EFE3; } body.theme-medina .footer .brand__text span { color: var(--gold-bright); } /* WhatsApp float — uses self-contained logo SVG */ body.theme-medina .wa-float { background: transparent; box-shadow: none; filter: drop-shadow(0 10px 24px rgba(37, 211, 102, 0.45)); } body.theme-medina .wa-float .wa-float__logo, body.theme-medina .wa-float svg { width: 60px; height: 60px; display: block; } /* Burger menu icon */ body.theme-medina .burger span { background: var(--text); } body.theme-medina .mobile-menu { background: var(--bg); border-top: 1px solid var(--border); } body.theme-medina .mobile-menu a { color: var(--text); } /* Subtle Moroccan tile pattern accent on Final CTA */ body.theme-medina .final-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(198, 93, 58, 0.18) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(198, 93, 58, 0.12) 0%, transparent 40%); pointer-events: none; opacity: 0.8; } body.theme-medina .final-cta { position: relative; overflow: hidden; } body.theme-medina .final-cta__content { position: relative; z-index: 1; } /* ================================================================ Image-overlay sections — text must stay WHITE on dark photo gradient. In Medina theme, --text is dark indigo (good for cards on cream), but on top of photos in "Itinéraires" and "Offre de lancement" the overlay is dark, so we need light text instead. ================================================================ */ /* --- Itinéraires (destination cards) --- */ body.theme-medina .dest-card__body { color: #FFFFFF; } body.theme-medina .dest-card h3 { color: #FFFFFF; } body.theme-medina .dest-card p { color: rgba(255, 255, 255, 0.88); } body.theme-medina .dest-card__eyebrow { color: var(--gold-bright); /* keep terracotta accent */ } /* --- Offre de lancement (promo band) --- */ body.theme-medina .promo h2, body.theme-medina .promo h2 .accent { color: #FFFFFF; } body.theme-medina .promo h2 .accent { color: var(--gold-bright); /* terracotta italic accent */ } body.theme-medina .promo p { color: rgba(255, 255, 255, 0.9); } body.theme-medina .promo__code { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); } /* Badge stays terracotta-on-cream — it's already legible, no change needed. */