/* Theme Name: TARGARYEN CAR Theme URI: https://khalidrentcar.com Description: Ultra-luxury automotive editorial — v11 — New Header · Footer · Multilang · RTL — Attributs Premium · Booking Tunnel · SEO IQ10000 Version: 18.0.0 Author: Claude for TARGARYEN CAR Text Domain: targaryen-car */ /* ════════════════════════════════════════════════════════════ TARGARYEN CAR v6 — IQ10000 EDITION Cinematic · Magnetic · Editorial Luxury NEW: Scroll progress · WhatsApp float · Back to top Header hide/show · RTL Arabic · Search clear Airport clickable · Parallax · Mobile expand ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Syne:wght@700;800;900&display=swap'); /* ── Design Tokens ──────────────────────────────────────── */ :root { --gold: #d4af37; --gold-light: #f0d060; --gold-pale: #f7e8a0; --gold-dark: #a8861a; --gold-dim: rgba(212,175,55,.12); --black: #08080d; --black-2: #0f0f16; --black-3: #16161f; --black-4: #1e1e2a; --glass: rgba(255,255,255,.035); --glass-hover: rgba(255,255,255,.06); --glass-border: rgba(212,175,55,.15); --glass-border-hover: rgba(212,175,55,.35); --text: #ededf0; --text-2: rgba(237,237,240,.7); --text-muted: rgba(237,237,240,.38); --green: #4ade80; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-accent: 'Syne', sans-serif; --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-xl: 36px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-cinema: cubic-bezier(0.4, 0, 0.2, 1); --shadow-gold: 0 0 60px rgba(212,175,55,.12), 0 0 120px rgba(212,175,55,.06); --shadow-card: 0 20px 80px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset; --transition: all .35s var(--ease-out); --header-h: 84px; } /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--black); color: var(--text); line-height: 1.7; overflow-x: hidden; cursor: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--gold); text-decoration: none; transition: var(--transition); } a:hover { color: var(--gold-light); } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: #fff; } /* ════════════════════════════════════════════════════════════ SCROLL PROGRESS BAR — top of page ════════════════════════════════════════════════════════════ */ #tc-scroll-progress { position: fixed; top: 0; left: 0; z-index: 99999; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light)); transition: width .1s linear; pointer-events: none; } /* ════════════════════════════════════════════════════════════ CURSOR — DRAGON EYE CANVAS Full canvas overlay — no DOM cursor elements needed ════════════════════════════════════════════════════════════ */ /* Hide old DOM cursor — canvas takes over */ #tc-cursor-wrap, .tc-cursor { display: none !important; } /* Canvas cursor — injected by JS */ #tc-cursor-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999999; } /* ── Cursor: hide native only when hover device + cursor JS loaded ── */ /* JS adds class 'tc-cursor-active' to when canvas cursor is running */ html.tc-cursor-active *, html.tc-cursor-active *::before, html.tc-cursor-active *::after { cursor: none !important; } html.tc-cursor-active input, html.tc-cursor-active textarea { cursor: text !important; } /* Reservation page always uses native cursor */ body.page-reservation, body.page-reservation * { cursor: auto !important; } body.page-reservation button, body.page-reservation a, body.page-reservation .tc-booking-vehicle-opt, body.page-reservation select { cursor: pointer !important; } body.page-reservation input, body.page-reservation textarea { cursor: text !important; } /* Touch / mobile — always native */ @media (hover: none) { html.tc-cursor-active *, html.tc-cursor-active *::before, html.tc-cursor-active *::after { cursor: auto !important; } #tc-cursor-canvas { display: none !important; } } /* ════════════════════════════════════════════════════════════ FILM GRAIN ════════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; z-index: 9997; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; animation: tc-grain 8s steps(10) infinite; } @keyframes tc-grain { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)} 20%{transform:translate(3%,1%)} 30%{transform:translate(-1%,2%)} 40%{transform:translate(2%,-2%)} 50%{transform:translate(-3%,3%)} 60%{transform:translate(1%,-1%)} 70%{transform:translate(-2%,2%)} 80%{transform:translate(3%,-3%)} 90%{transform:translate(-1%,1%)} } /* ════════════════════════════════════════════════════════════ CONTAINER ════════════════════════════════════════════════════════════ */ .tc-container { max-width: 1320px; margin: 0 auto; padding: 0 48px; } @media (max-width: 1024px) { .tc-container { padding: 0 32px; } } @media (max-width: 640px) { .tc-container { padding: 0 20px; } } /* ════════════════════════════════════════════════════════════ REVEAL ANIMATIONS ════════════════════════════════════════════════════════════ */ .tc-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .tc-reveal.revealed { opacity: 1; transform: none; } .tc-delay-1 { transition-delay: .1s !important; } .tc-delay-2 { transition-delay: .2s !important; } .tc-delay-3 { transition-delay: .32s !important; } .tc-delay-4 { transition-delay: .44s !important; } /* ════════════════════════════════════════════════════════════ TYPOGRAPHY HELPERS ════════════════════════════════════════════════════════════ */ .tc-eyebrow { font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px; } .tc-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--gold); flex-shrink: 0; } .tc-sep { width: 48px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 18px 0; } .tc-sep-center { margin: 18px auto; } .tc-section-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1.1; color: #fff; letter-spacing: -.01em; } .tc-section-title em { font-style: italic; color: var(--gold); } .tc-section-subtitle { font-size: 16px; color: var(--text-muted); max-width: 560px; line-height: 1.8; } .tc-section-header { margin-bottom: 32px; } .tc-gold-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .tc-glass { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } /* ════════════════════════════════════════════════════════════ BUTTONS — Magnetic, cinematic ════════════════════════════════════════════════════════════ */ .tc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 38px; border-radius: 100px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: auto; border: none; transition: all .4s var(--ease-out); position: relative; overflow: hidden; white-space: nowrap; } .tc-btn::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-20deg); transition: left .6s var(--ease-out); } .tc-btn:hover::after { left: 125%; } .tc-btn-gold { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%); background-size: 200% 200%; background-position: 100% 0; color: #000; box-shadow: 0 4px 24px rgba(212,175,55,.35), 0 1px 0 rgba(255,255,255,.2) inset; } .tc-btn-gold:hover { background-position: 0 100%; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(212,175,55,.5), 0 1px 0 rgba(255,255,255,.2) inset; color: #000; } .tc-btn-gold:active { transform: translateY(-1px) scale(.98); } .tc-btn-outline { background: transparent; border: 1px solid rgba(212,175,55,.3); color: var(--gold); } .tc-btn-outline:hover { border-color: var(--gold); background: rgba(212,175,55,.07); transform: translateY(-3px); box-shadow: 0 0 30px rgba(212,175,55,.1); color: var(--gold-light); } .tc-btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text); } .tc-btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); color: #fff; } /* ════════════════════════════════════════════════════════════ HEADER / NAV ════════════════════════════════════════════════════════════ */ #tc-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all .5s var(--ease-cinema), transform .4s var(--ease-out); } #tc-header.scrolled { background: rgba(8,8,13,.92); backdrop-filter: blur(28px) saturate(1.6); border-bottom: 1px solid rgba(212,175,55,.08); box-shadow: 0 8px 40px rgba(0,0,0,.4); } /* NEW: hide header when scrolling down */ #tc-header.tc-header-hidden { transform: translateY(-100%); } .tc-nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .tc-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; position: relative; } .tc-logo-icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gold) 50%, var(--gold-dark) 100%); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 20px rgba(212,175,55,.4), 0 1px 0 rgba(255,255,255,.3) inset; transition: transform .4s var(--ease-spring), box-shadow .4s; } .tc-logo:hover .tc-logo-icon { transform: rotate(-8deg) scale(1.08); box-shadow: 0 8px 32px rgba(212,175,55,.6), 0 1px 0 rgba(255,255,255,.3) inset; } .tc-logo-text { font-family: var(--font-accent); font-size: 17px; font-weight: 900; color: #fff; letter-spacing: .04em; line-height: 1; } .tc-logo-sub { font-size: 9px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-top: 3px; } .tc-nav-links { display: flex; align-items: center; gap: 44px; list-style: none; } .tc-nav-links a { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .1em; text-transform: uppercase; position: relative; padding-bottom: 4px; transition: color .3s; } .tc-nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--gold); transition: width .35s var(--ease-out), left .35s var(--ease-out); } .tc-nav-links a:hover, .tc-nav-links a.tc-nav-active { color: var(--gold); } .tc-nav-links a:hover::after, .tc-nav-links a.tc-nav-active::after { width: 100%; left: 0; } .tc-nav-cta { display: flex; align-items: center; gap: 14px; } .tc-lang-switcher { display: flex; gap: 3px; } .tc-lang-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 5px 9px; font-size: 10px; font-weight: 800; color: var(--text-muted); cursor: auto; transition: all .2s; text-transform: uppercase; letter-spacing: .06em; } .tc-lang-btn.active, .tc-lang-btn:hover { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.35); color: var(--gold); } .tc-hamburger { display: none; flex-direction: column; gap: 5px; cursor: auto; padding: 10px; background: none; border: none; } .tc-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--gold); border-radius: 2px; transition: all .35s var(--ease-out); } /* tc-mobile-menu base — overridden by tc-drawer rules below */ .tc-mobile-menu:not(.tc-drawer) { display: none !important; } /* Drawer anchors reset — kill old huge font */ .tc-drawer a { font-size: inherit; font-family: inherit; font-style: normal; } /* ══ DRAWER: kill ALL old .tc-mobile-menu overrides ═════ */ /* The drawer has both classes: tc-mobile-menu + tc-drawer We need to hard-reset everything from old .tc-mobile-menu rules */ .tc-mobile-menu.tc-drawer { /* Positioning — right side panel, NOT fullscreen */ position: fixed !important; inset: auto !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(320px, 88vw) !important; /* Layout — column list, NOT centered */ display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; padding: 0 !important; /* Visibility — slide from right */ opacity: 1 !important; pointer-events: none; transform: translateX(110%) !important; transition: transform .42s cubic-bezier(.16,1,.3,1) !important; /* Background */ background: rgba(10,10,18,.98) !important; backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important; border-left: 1px solid rgba(212,175,55,.12) !important; border-bottom: none !important; /* Scroll */ overflow-y: auto !important; overflow-x: hidden !important; z-index: 9999 !important; } .tc-mobile-menu.tc-drawer.open { transform: translateX(0) !important; pointer-events: all !important; opacity: 1 !important; } /* ════════════════════════════════════════════════════════════ HERO SLIDER ════════════════════════════════════════════════════════════ */ #tc-hero-slider { position: relative; height: 88svh; min-height: 620px; overflow: visible; background: var(--black); clip-path: none; } #tc-hero-slider::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(212,175,55,.07) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 30%, rgba(80,40,180,.05) 0%, transparent 60%); animation: tc-mesh 12s ease-in-out infinite alternate; } @keyframes tc-mesh { 0% { opacity: .6; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.05) rotate(1deg); } 100% { opacity: .7; transform: scale(.98) rotate(-1deg); } } #tc-hero-slider::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(rgba(212,175,55,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); } .tc-slide { position: absolute; inset: 0; z-index: 3; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease-cinema); } .tc-slide.tc-slide-active { opacity: 1; pointer-events: all; } .tc-slide-bg { position: absolute; inset: 0; z-index: 0; } .tc-slide-content { position: relative; z-index: 4; display: flex; align-items: center; height: 100%; padding-top: var(--header-h); } .tc-slide-inner { max-width: 760px; } .tc-hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.2); border-radius: 100px; padding: 8px 20px; font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 32px; animation: tc-fade-up .7s var(--ease-out) .1s both; } .tc-hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: tc-pulse-dot 2.5s infinite; } @keyframes tc-pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.5); } 50% { box-shadow: 0 0 0 8px rgba(212,175,55,0); } } @keyframes tc-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .tc-hero-title { font-family: var(--font-display); font-size: clamp(52px, 8.5vw, 110px); font-weight: 300; line-height: 1.0; letter-spacing: -.02em; color: #fff; display: block; margin-bottom: 28px; animation: tc-fade-up .8s var(--ease-out) .2s both; } .tc-hero-title em { display: block; font-style: italic; color: var(--gold); /* solid gold — always visible */ -webkit-text-fill-color: var(--gold); /* override any parent transparent */ } /* Selection readable */ .tc-hero-title em::selection, .tc-hero-title em *::selection { -webkit-text-fill-color: #000; background-color: var(--gold); color: #000; } .tc-hero-title strong { display: block; font-weight: 700; -webkit-text-fill-color: #fff; } .tc-hero-desc { font-size: 16px; color: var(--text-2); max-width: 520px; line-height: 1.85; margin-bottom: 44px; animation: tc-fade-up .8s var(--ease-out) .3s both; } .tc-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; animation: tc-fade-up .8s var(--ease-out) .4s both; } .tc-hero-stats { display: flex; gap: 48px; flex-wrap: wrap; animation: tc-fade-up .8s var(--ease-out) .5s both; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.06); } .tc-stat-num { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--gold); line-height: 1; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tc-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; } .tc-slide-fleet-preview { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; animation: tc-fade-up .8s var(--ease-out) .5s both; } .tc-slide-car-chip { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.15); border-radius: 100px; padding: 6px 18px 6px 6px; font-size: 12px; color: var(--text); transition: all .3s var(--ease-out); cursor: auto; } .tc-slide-car-chip:hover { background: rgba(212,175,55,.08); border-color: var(--gold); transform: translateY(-3px) scale(1.02); color: #fff; } .tc-slide-car-chip img { width: 46px; height: 32px; object-fit: cover; border-radius: 50px; } .tc-chip-price { color: var(--gold); font-weight: 700; font-size: 11px; margin-left: 4px; } .tc-slide-airports { display: flex; gap: 10px; margin-top: 36px; flex-wrap: wrap; animation: tc-fade-up .8s var(--ease-out) .5s both; } .tc-airport-pill { background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.18); border-radius: 100px; padding: 7px 16px; font-size: 11px; font-weight: 600; color: #4ade80; white-space: nowrap; transition: all .25s; } .tc-airport-pill:hover { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.4); transform: translateY(-2px); } .tc-slide-vertical-text { display: none; } /* ══ Hero branding panel — right side subliminal ══════════ */ .tc-hero-brand-panel { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; user-select: none; width: 170px; } /* Dragon Targaryen sigil */ .tc-brand-dragon { opacity: 0.12; width: 160px; animation: tc-dragon-breathe 8s ease-in-out infinite; } .tc-brand-dragon svg { width: 100%; height: auto; } @keyframes tc-dragon-breathe { 0%, 100% { opacity: 0.10; transform: scale(1); } 40% { opacity: 0.20; transform: scale(1.02); } 60% { opacity: 0.18; transform: scale(1.01); } } /* Couronne emblème */ .tc-brand-emblem { opacity: 0.18; animation: tc-brand-pulse 6s ease-in-out infinite; } .tc-brand-emblem svg { width: 52px; height: 52px; } /* Silhouette voiture */ .tc-brand-car { opacity: 0.22; width: 140px; } .tc-brand-car svg { width: 100%; height: auto; } /* Brand name vertical */ .tc-brand-name-vert { font-family: var(--font-accent); font-size: 8px; font-weight: 800; letter-spacing: .35em; text-transform: uppercase; color: rgba(212,175,55,.28); writing-mode: vertical-rl; text-orientation: mixed; margin-top: 4px; } /* Pulse subtil */ @keyframes tc-brand-pulse { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.28; } } @media (max-width: 1100px) { .tc-hero-brand-panel { display: none; } } .tc-slide-counter { position: absolute; bottom: 80px; right: 60px; z-index: 10; font-family: var(--font-display); font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .tc-slide-counter-current { font-size: 28px; font-weight: 700; color: var(--gold); line-height: 1; } .tc-slider-controls { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; z-index: 10; } .tc-slider-prev, .tc-slider-next { width: 48px; height: 48px; background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.2); border-radius: 50%; color: rgba(255,255,255,.6); font-size: 20px; cursor: auto; display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease-spring); } .tc-slider-prev:hover, .tc-slider-next:hover { background: var(--gold); border-color: var(--gold); color: #000; transform: scale(1.12); box-shadow: 0 0 24px rgba(212,175,55,.5); } .tc-slider-dots { display: flex; gap: 8px; align-items: center; } .tc-dot { width: 6px; height: 6px; border-radius: 100px; border: none; background: rgba(255,255,255,.2); cursor: auto; transition: all .4s var(--ease-out); padding: 0; } .tc-dot.active { background: var(--gold); width: 32px; } .tc-slider-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.05); z-index: 10; } .tc-slider-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light)); } .tc-scroll-hint { position: absolute; bottom: 44px; left: 60px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tc-scroll-hint-line { width: 1px; height: 56px; background: linear-gradient(to bottom, var(--gold), transparent); animation: tc-scroll-pulse 2.5s ease-in-out infinite; } @keyframes tc-scroll-pulse { 0%,100% { opacity: .3; transform: scaleY(1); transform-origin: top; } 50% { opacity: 1; } } .tc-scroll-hint-text { font-size: 9px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--text-muted); writing-mode: vertical-rl; } /* ════════════════════════════════════════════════════════════ HOME RESERVATION ════════════════════════════════════════════════════════════ */ #tc-home-reservation { padding: 65px 0; background: var(--black); position: relative; } #tc-home-reservation::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 1px; max-width: 90%; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .tc-home-res-header { text-align: center; margin-bottom: 72px; } .tc-home-res-header .tc-eyebrow { justify-content: center; } .tc-home-res-header .tc-eyebrow::before { display: none; } .tc-home-res-wrap { max-width: 1000px; margin: 0 auto; } /* ════════════════════════════════════════════════════════════ VEHICLES SECTION ════════════════════════════════════════════════════════════ */ #tc-vehicles { padding: 65px 0; position: relative; } .tc-section-header .tc-eyebrow { margin-bottom: 20px; } .tc-section-header h2 { margin: 0 0 16px; } .tc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; } .tc-filter-btn { padding: 9px 22px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: auto; transition: all .25s; letter-spacing: .04em; } .tc-filter-btn:hover, .tc-filter-btn.active { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.35); color: var(--gold); } .tc-vehicles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .tc-vehicles-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tc-vehicles-grid { grid-template-columns: 1fr; } } /* Vehicle Card */ .tc-vehicle-card { background: var(--black-2); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius-lg); overflow: hidden; cursor: auto; transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s; transform-style: preserve-3d; will-change: transform; } .tc-vehicle-card:hover { border-color: rgba(212,175,55,.25); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.06); } .tc-vehicle-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--black-3); } .tc-vehicle-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .tc-vehicle-card:hover .tc-vehicle-img-wrap img { transform: scale(1.06); } .tc-vehicle-category { position: absolute; top: 14px; left: 14px; background: rgba(8,8,13,.7); backdrop-filter: blur(8px); border: 1px solid rgba(212,175,55,.25); border-radius: 100px; padding: 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .tc-vehicle-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212,175,55,.0) 0%, rgba(212,175,55,.08) 50%, rgba(212,175,55,.0) 100%); opacity: 0; transition: opacity .4s; pointer-events: none; } .tc-vehicle-card:hover .tc-vehicle-img-wrap::after { opacity: 1; } .tc-vehicle-body { padding: 22px 24px 26px; } .tc-vehicle-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 12px; letter-spacing: -.01em; } .tc-vehicle-specs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .tc-vehicle-spec { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); font-weight: 500; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 4px 10px; } .tc-vehicle-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.05); } .tc-vehicle-price-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tc-vehicle-price-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .tc-vehicle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 100px; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.25); color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: all .3s var(--ease-out); cursor: auto; white-space: nowrap; } .tc-vehicle-btn:hover { background: var(--gold); color: #000; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,175,55,.4); } /* ════════════════════════════════════════════════════════════ AIRPORTS — clickable cards ════════════════════════════════════════════════════════════ */ #tc-airports { padding: 65px 0; background: var(--black-2); position: relative; } #tc-airports::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.2), transparent); } .tc-airports-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border-radius: var(--radius-lg); overflow: hidden; } @media (max-width: 900px) { .tc-airports-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; } } @media (max-width: 400px) { .tc-airports-grid { grid-template-columns: repeat(2, 1fr); } } .tc-airport-card { background: rgba(255,255,255,.02); padding: 28px 20px; text-align: center; cursor: auto; transition: background .3s, transform .3s var(--ease-spring); position: relative; overflow: hidden; } .tc-airport-card[data-airport] { cursor: auto; } .tc-airport-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212,175,55,.05), transparent); opacity: 0; transition: opacity .3s; } .tc-airport-card:hover { background: rgba(212,175,55,.05); transform: translateY(-3px); } .tc-airport-card:hover::before { opacity: 1; } /* NEW: click ripple effect */ .tc-airport-card:active { transform: translateY(-1px) scale(.98); } .tc-airport-icon { font-size: 28px; margin-bottom: 10px; } .tc-airport-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 3px; } .tc-airport-fee { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gold); margin-top: 8px; } .tc-airport-free { color: #4ade80 !important; } .tc-airport-subtitle { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; } /* NEW: hover label "Réserver →" */ .tc-airport-card .tc-airport-cta { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; margin-top: 10px; opacity: 0; transform: translateY(4px); transition: all .3s; } .tc-airport-card:hover .tc-airport-cta { opacity: 1; transform: translateY(0); } /* ════════════════════════════════════════════════════════════ WHY US — hover expand on mobile ════════════════════════════════════════════════════════════ */ #tc-why { padding: 65px 0; } .tc-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius-lg); overflow: hidden; margin-top: 64px; } @media (max-width: 1024px) { .tc-why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tc-why-grid { grid-template-columns: 1fr; } } .tc-why-item { padding: 28px 28px; background: var(--black-2); position: relative; transition: background .3s; overflow: hidden; opacity: 1; animation: tc-why-fadein .6s ease both; } @keyframes tc-why-fadein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .tc-why-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform .5s var(--ease-out); transform-origin: center; } .tc-why-item:hover { background: var(--black-3); } .tc-why-item:hover::after { transform: scaleX(1); } .tc-why-item.expanded { background: var(--black-3); } .tc-why-item.expanded::after { transform: scaleX(1); } .tc-why-number { font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1; color: rgba(212,175,55,.07); position: absolute; top: 16px; right: 24px; transition: color .3s; } .tc-why-item:hover .tc-why-number { color: rgba(212,175,55,.12); } .tc-why-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 12px; position: relative; } .tc-why-text { font-size: 14px; color: var(--text-muted); line-height: 1.75; position: relative; } /* ════════════════════════════════════════════════════════════ TESTIMONIALS — click to expand ════════════════════════════════════════════════════════════ */ #tc-testimonials { padding: 65px 0; background: var(--black-2); position: relative; } #tc-testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.15), transparent); } .tc-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .tc-testimonials-grid { grid-column: 1; max-width: 560px; margin: 0 auto; } } .tc-testimonial-card { background: var(--black-3); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius-lg); padding: 24px; position: relative; overflow: hidden; transition: all .4s var(--ease-out); cursor: auto; } .tc-testimonial-card::before { content: '"'; position: absolute; top: 16px; right: 24px; font-family: var(--font-display); font-size: 120px; line-height: 1; color: rgba(212,175,55,.04); pointer-events: none; font-style: italic; } .tc-testimonial-card:hover, .tc-testimonial-card.tc-testimonial-expanded { border-color: rgba(212,175,55,.18); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.4); } .tc-testimonial-stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; margin-bottom: 18px; } .tc-testimonial-text { font-family: var(--font-display); font-size: 16px; font-style: italic; color: var(--text-2); line-height: 1.8; margin-bottom: 28px; } .tc-testimonial-author { display: flex; align-items: center; gap: 14px; } .tc-author-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-size: 16px; font-weight: 900; color: #000; flex-shrink: 0; } .tc-author-name { font-size: 14px; font-weight: 700; color: #fff; } .tc-author-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ════════════════════════════════════════════════════════════ FLEET PAGES ════════════════════════════════════════════════════════════ */ #tc-fleet-hero { position: relative; padding: 160px 0 80px; overflow: hidden; background: var(--black); } #tc-fleet-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(212,175,55,.05) 0%, transparent 70%); } #tc-fleet-gallery { padding: 80px 0 40px; } .tc-fleet-controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; } .tc-fleet-search-wrap { flex: 1; min-width: 240px; position: relative; } .tc-fleet-search { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 100px; padding: 13px 50px 13px 26px; color: #fff; font-size: 13px; font-family: var(--font-body); outline: none; transition: all .3s; cursor: text; } .tc-fleet-search:focus { border-color: rgba(212,175,55,.35); background: rgba(212,175,55,.04); box-shadow: 0 0 0 4px rgba(212,175,55,.07); } .tc-fleet-search::placeholder { color: var(--text-muted); } /* NEW: clear button */ .tc-search-clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: none; border-radius: 50%; width: 22px; height: 22px; color: var(--text-muted); font-size: 11px; cursor: auto; transition: all .2s; display: flex; align-items: center; justify-content: center; } .tc-search-clear:hover { background: rgba(212,175,55,.15); color: var(--gold); } .tc-fleet-sort { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; } .tc-fleet-count { font-size: 12px; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; } .tc-fleet-sort-btns { display: flex; gap: 6px; } .tc-sort-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 7px 14px; color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: auto; transition: all .2s; letter-spacing: .04em; } .tc-sort-btn.active, .tc-sort-btn:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3); color: var(--gold); } .tc-fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .tc-fleet-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tc-fleet-grid { grid-template-columns: 1fr; } } /* Fleet Card */ .tc-fleet-card { background: var(--black-2); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius-lg); overflow: hidden; cursor: auto; transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s; } .tc-fleet-card:hover { transform: translateY(-8px); border-color: rgba(212,175,55,.25); box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.06); } .tc-fleet-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--black-3); } .tc-fleet-img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); } .tc-fleet-card:hover .tc-fleet-img { transform: scale(1.07); } .tc-fleet-img-overlay { position: absolute; inset: 0; background: rgba(8,8,13,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; } .tc-fleet-card:hover .tc-fleet-img-overlay { opacity: 1; } .tc-fleet-gallery-btn { background: rgba(212,175,55,.9); border: none; border-radius: 100px; padding: 10px 24px; color: #000; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: auto; transition: transform .2s var(--ease-spring); } .tc-fleet-gallery-btn:hover { transform: scale(1.06); } .tc-fleet-season-badge { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 5px; } .tc-badge-s1, .tc-badge-s2 { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 6px; letter-spacing: .04em; } .tc-badge-s1 { background: rgba(212,175,55,.9); color: #000; } .tc-badge-s2 { background: rgba(239,68,68,.8); color: #fff; } .tc-fleet-body { padding: 22px 24px 26px; } .tc-fleet-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.05); } .tc-fleet-pricing { flex: 1; } .tc-fleet-price-main { display: flex; align-items: baseline; gap: 6px; } .tc-fleet-price-summer { font-size: 11px; color: #f87171; margin-top: 3px; } .tc-fleet-card-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .tc-fleet-wa-btn { width: 40px; height: 40px; background: rgba(37,211,102,.07); border: 1px solid rgba(37,211,102,.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: auto; transition: all .25s; text-decoration: none; } .tc-fleet-wa-btn:hover { background: rgba(37,211,102,.18); border-color: #25d366; transform: scale(1.1); } .tc-fleet-empty { grid-column: 1/-1; text-align: center; padding: 80px; color: var(--text-muted); } /* ════════════════════════════════════════════════════════════ LIGHTBOX ════════════════════════════════════════════════════════════ */ .tc-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-cinema); } .tc-lightbox.open { opacity: 1; pointer-events: all; } .tc-lightbox-overlay { position: absolute; inset: 0; background: rgba(8,8,13,.95); cursor: auto; } .tc-lightbox-inner { position: relative; z-index: 2; max-width: 920px; width: 92%; text-align: center; } .tc-lb-img { width: 100%; border-radius: 20px; max-height: 68vh; object-fit: cover; box-shadow: 0 60px 120px rgba(0,0,0,.7); } .tc-lb-close { position: absolute; top: -52px; right: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font-size: 18px; cursor: auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .2s; } .tc-lb-close:hover { background: rgba(212,175,55,.15); border-color: var(--gold); color: var(--gold); } .tc-lb-name { font-family: var(--font-display); font-size: 24px; font-style: italic; color: #fff; margin: 24px 0 18px; } .tc-lb-cta { display: inline-flex; margin: 0 auto; } /* ════════════════════════════════════════════════════════════ RESERVATION PAGE ════════════════════════════════════════════════════════════ */ #tc-res-page-hero { position: relative; padding: 160px 0 80px; overflow: hidden; text-align: center; } .tc-res-stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 72px; flex-wrap: wrap; } .tc-res-step { display: flex; align-items: center; gap: 12px; padding: 12px 28px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); cursor: auto; transition: all .35s var(--ease-out); } .tc-res-step.active { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.35); color: var(--gold); } .tc-res-step.done { background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.25); color: #4ade80; } .tc-res-step-num { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .tc-res-step.active .tc-res-step-num { background: var(--gold); color: #000; } .tc-res-step.done .tc-res-step-num { background: #4ade80; color: #000; } .tc-res-step-connector { width: 48px; height: 1px; background: rgba(255,255,255,.07); } .tc-res-page-body { padding: 0 0 120px; } /* ── Form isolation from dark theme ─── */ .tc-res-form-col { background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; } .tc-res-form-col .trc-wrap { background: #ffffff !important; color: #1a1a2e !important; } .tc-res-form-col input, .tc-res-form-col select, .tc-res-form-col textarea { background: #ffffff !important; color: #1a1a2e !important; border-color: #e2e8f0 !important; } .tc-res-form-col label, .tc-res-form-col .trc-label { color: #64748b !important; } .tc-res-form-col .trc-step-title, .tc-res-form-col .trc-vehicle-name, .tc-res-form-col .trc-vopt-name, .tc-res-form-col .trc-bd-val, .tc-res-form-col .trc-ap-name { color: #1a1a2e !important; } .tc-res-form-col .trc-step-sub, .tc-res-form-col .trc-bd-label { color: #64748b !important; } .tc-res-main-grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; } @media (max-width: 1024px) { .tc-res-main-grid { grid-template-columns: 1fr; } } .tc-res-info-panel { background: var(--black-2); border: 1px solid rgba(212,175,55,.1); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 100px; } .tc-res-info-title { font-family: var(--font-display); font-size: 24px; color: #fff; margin-bottom: 28px; } .tc-res-info-feature { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .tc-res-info-icon { width: 38px; height: 38px; flex-shrink: 0; background: rgba(212,175,55,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .tc-res-info-text { font-size: 13px; color: var(--text-muted); line-height: 1.65; } .tc-res-info-text strong { color: var(--text); display: block; margin-bottom: 2px; font-size: 14px; } /* ════════════════════════════════════════════════════════════ FLEET CTA BANNER ════════════════════════════════════════════════════════════ */ #tc-fleet-cta { padding: 45px 0; } .tc-fleet-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(212,175,55,.07) 0%, rgba(212,175,55,.02) 100%); border: 1px solid rgba(212,175,55,.16); border-radius: var(--radius-xl); padding: 56px 64px; position: relative; overflow: hidden; } .tc-fleet-cta-box::before { content: ''; position: absolute; right: -20px; top: -40px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,.06) 0%, transparent 70%); pointer-events: none; } .tc-fleet-cta-title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); color: #fff; margin-bottom: 8px; } .tc-fleet-cta-title em { color: var(--gold); font-style: italic; } .tc-fleet-cta-sub { color: var(--text-muted); font-size: 14px; } .tc-fleet-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ TRACKING BADGE ════════════════════════════════════════════════════════════ */ .tc-tracking-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.18); border-radius: 100px; padding: 8px 20px; font-size: 12px; font-weight: 700; color: #4ade80; letter-spacing: .04em; } .tc-tracking-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: tc-pulse 2s infinite; } @keyframes tc-pulse { 0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 50% { opacity: .7; transform: scale(1.3); box-shadow: 0 0 0 6px rgba(74,222,128,0); } } /* ════════════════════════════════════════════════════════════ WHATSAPP FLOATING — 2 contacts panel ════════════════════════════════════════════════════════════ */ #tc-wa-float { position: fixed; bottom: 32px; right: 32px; z-index: 9996; opacity: 0; transform: translateY(20px) scale(.9); transition: all .4s var(--ease-spring); pointer-events: none; /* panel + button stacked, button always at bottom */ } #tc-wa-float.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* Toggle button */ .tc-wa-toggle-btn { width: 58px; height: 58px; border-radius: 50%; background: #25d366; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 32px rgba(37,211,102,.45); transition: transform .3s var(--ease-spring), box-shadow .3s, background .3s; animation: tc-wa-pulse 3s ease-in-out infinite; flex-shrink: 0; position: relative; z-index: 2; } @keyframes tc-wa-pulse { 0%,100% { box-shadow: 0 8px 32px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.3); } 50% { box-shadow: 0 8px 32px rgba(37,211,102,.5), 0 0 0 14px rgba(37,211,102,0); } } .tc-wa-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 12px 40px rgba(37,211,102,.6); } .tc-wa-toggle-btn[aria-expanded="true"] { background: #1a1a2e; animation: none; } /* Icon switch */ .tc-wa-toggle-icon { display: flex; align-items: center; justify-content: center; position: absolute; transition: opacity .2s, transform .2s; } .tc-wa-icon-close { opacity: 0; transform: rotate(-90deg) scale(.7); } .tc-wa-toggle-btn[aria-expanded="true"] .tc-wa-icon-wa { opacity: 0; transform: rotate(90deg) scale(.7); } .tc-wa-toggle-btn[aria-expanded="true"] .tc-wa-icon-close { opacity: 1; transform: rotate(0) scale(1); } /* Panel — FIXED position, anchored above toggle */ .tc-wa-panel { position: fixed; bottom: 102px; /* 32px bottom + 58px btn + 12px gap */ right: 32px; z-index: 9997; background: rgba(12,12,20,.98); border: 1px solid rgba(37,211,102,.2); border-radius: 18px; padding: 6px; width: 270px; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; transform: translateY(12px) scale(.95); transition: opacity .25s var(--ease-spring), transform .25s var(--ease-spring); pointer-events: none; } .tc-wa-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .tc-wa-panel-header { font-family: var(--font-accent); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 6px; } /* Contact buttons inside panel */ .tc-wa-contact-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none !important; color: var(--text) !important; transition: background .18s; margin-bottom: 2px; } .tc-wa-contact-btn:hover { background: rgba(37,211,102,.08); } .tc-wa-contact-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #25d366, #128c7e); display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-size: .95rem; font-weight: 800; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.3); } .tc-wa-av2 { background: linear-gradient(135deg, #d4af37, #b8860b); box-shadow: 0 4px 14px rgba(212,175,55,.3); } .tc-wa-contact-info { flex: 1; } .tc-wa-contact-info strong { display: block; font-size: .85rem; color: var(--text); font-weight: 700; } .tc-wa-contact-info span { font-size: .7rem; color: var(--text-muted); } .tc-wa-contact-arrow { color: #25d366; flex-shrink: 0; opacity: .7; } /* Mobile — au-dessus de la bottom nav (62px) */ @media (max-width: 900px) { #tc-wa-float { bottom: calc(62px + env(safe-area-inset-bottom, 8px) + 16px); right: 14px; } .tc-wa-panel { width: calc(100vw - 28px); max-width: 320px; right: 14px; bottom: calc(62px + env(safe-area-inset-bottom, 8px) + 16px + 58px + 12px); } } /* ── Footer Contact Cards ─────────────────────────────────── */ .tc-fcontact-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px; margin-bottom: 10px; transition: border-color .2s; } .tc-fcontact-card:hover { border-color: rgba(212,175,55,.2); } .tc-fcontact-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .tc-fcontact-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #25d366, #128c7e); display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-size: .85rem; font-weight: 800; color: #fff; } .tc-fca-2 { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); } .tc-fcontact-name { font-weight: 700; font-size: .82rem; color: var(--text); line-height: 1.2; } .tc-fcontact-avail { font-size: .67rem; color: #4ade80; font-family: var(--font-accent); letter-spacing: .04em; } .tc-fcontact-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tc-fcontact-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 8px 10px !important; border-radius: 9px !important; font-size: .72rem !important; font-family: var(--font-accent) !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; text-decoration: none !important; transition: all .18s !important; border: 1px solid transparent !important; } .tc-fcb-tel { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: var(--text) !important; } .tc-fcb-tel:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; } .tc-fcb-wa { background: rgba(37,211,102,.1) !important; border-color: rgba(37,211,102,.25) !important; color: #25d366 !important; } .tc-fcb-wa:hover { background: rgba(37,211,102,.2) !important; } /* ════════════════════════════════════════════════════════════ BACK TO TOP — NEW ════════════════════════════════════════════════════════════ */ #tc-back-to-top { position: fixed; bottom: 100px; right: 32px; z-index: 8999; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(212,175,55,.2); color: var(--gold); font-size: 16px; cursor: auto; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: all .35s var(--ease-spring); pointer-events: none; } #tc-back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; } #tc-back-to-top:hover { background: rgba(212,175,55,.12); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(212,175,55,.2); } /* ════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════ */ #tc-footer { background: var(--black-2); border-top: 1px solid rgba(255,255,255,.04); padding: 80px 0 40px; } .tc-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px; margin-bottom: 60px; } @media (max-width: 1024px) { .tc-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 640px) { .tc-footer-grid { grid-template-columns: 1fr; gap: 32px; } } .tc-footer-desc { font-size: 14px; color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; max-width: 320px; } .tc-footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .tc-social-links { display: flex; gap: 10px; } .tc-social-link { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 17px; transition: all .25s; cursor: auto; } .tc-social-link:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3); transform: translateY(-3px); } .tc-footer-col-title { font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .tc-footer-links { list-style: none; } .tc-footer-links li { margin-bottom: 11px; } .tc-footer-links a { font-size: 13px; color: var(--text-muted); transition: color .2s; } .tc-footer-links a:hover { color: #fff; } .tc-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .tc-contact-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .tc-contact-item span, .tc-contact-item a { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .tc-contact-item a:hover { color: var(--gold); } .tc-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.05); } .tc-footer-copy { font-size: 12px; color: var(--text-muted); } .tc-footer-copy span { color: var(--gold); } .tc-footer-legal { display: flex; gap: 24px; } .tc-footer-legal a { font-size: 12px; color: var(--text-muted); transition: color .2s; } .tc-footer-legal a:hover { color: var(--gold); } /* ════════════════════════════════════════════════════════════ PAGE VEIL — transitions ════════════════════════════════════════════════════════════ */ #tc-page-veil { position: fixed; inset: 0; z-index: 99999; background: var(--black); opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(0.4,0,0.2,1); } /* ════════════════════════════════════════════════════════════ RTL ARABIC SUPPORT — NEW ════════════════════════════════════════════════════════════ */ [dir="rtl"] .tc-eyebrow::before { order: 2; } [dir="rtl"] .tc-sep { margin: 18px 0; } [dir="rtl"] .tc-hero-actions { flex-direction: row-reverse; } [dir="rtl"] .tc-nav-links { flex-direction: row-reverse; } [dir="rtl"] #tc-wa-float { right: auto; left: 32px; } [dir="rtl"] #tc-back-to-top { right: auto; left: 32px; } [dir="rtl"] .tc-wa-tooltip { right: auto; left: 68px; } [dir="rtl"] .tc-wa-tooltip::after { right: auto; left: -6px; border-left: none; border-right-color: rgba(8,8,13,.95); } /* ════════════════════════════════════════════════════════════ MOBILE NAV ════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .tc-nav-links, .tc-nav-cta { display: none; } .tc-hamburger { display: flex; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .tc-hero-title { font-size: clamp(44px, 7vw, 80px); } .tc-hero-stats { gap: 28px; } .tc-fleet-cta-box { padding: 40px 36px; } } @media (max-width: 768px) { #tc-hero-slider { height: auto; min-height: 100svh; } .tc-slide-inner { padding-bottom: 120px; } .tc-hero-actions { flex-direction: column; gap: 12px; } .tc-hero-actions .tc-btn { justify-content: center; } .tc-slider-controls { bottom: 28px; } .tc-scroll-hint, .tc-slide-vertical-text, .tc-slide-counter { display: none; } #tc-back-to-top { bottom: 84px; right: 20px; } .tc-why-item { padding: 32px 24px; } .tc-airport-card { padding: 22px 12px; } } @media (max-width: 640px) { .tc-airports-grid { grid-template-columns: repeat(2, 1fr); } .tc-why-grid { grid-template-columns: 1fr; } .tc-testimonials-grid { grid-template-columns: 1fr; } .tc-res-stepper { gap: 6px; } .tc-res-step { padding: 9px 16px; font-size: 11px; } .tc-res-step-connector { width: 16px; } .tc-slide-vertical-text, .tc-slide-counter { display: none; } .tc-fleet-sort { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ════════════════════════════════════════════════════════════ UTILITY ════════════════════════════════════════════════════════════ */ [data-href] { cursor: pointer; } .tc-step-panel { display: none; } .tc-step-panel.active { display: block; } button, a, [role="button"], .tc-vehicle-card, .tc-fleet-card, .tc-airport-card { cursor: pointer; } input, select, textarea, label { cursor: auto; } @media (hover: none) { button, a, input, select, textarea, label, [role="button"], .tc-vehicle-card, .tc-fleet-card, .tc-airport-card { cursor: auto; } } /* ════════════════════════════════════════════════════════════ ACCESSIBILITY — Focus visible (keyboard nav) ════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* Skip to content link */ .tc-skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; background: var(--gold); color: #000; padding: 10px 20px; border-radius: 0 0 8px 8px; font-weight: 800; font-size: 13px; letter-spacing: .06em; transition: top .2s; } .tc-skip-link:focus { top: 0; } /* Why items — now tags, inherit dark style */ a.tc-why-item { color: inherit; text-decoration: none; cursor: auto; } a.tc-why-item:hover { color: inherit; } a.tc-why-item:hover .tc-why-title { color: var(--gold); } /* FAQ Section */ .tc-faq { padding: 80px 0; background: var(--black-2); } .tc-faq-grid { max-width: 800px; margin: 0 auto; } .tc-faq-item { border-bottom: 1px solid rgba(255,255,255,.07); padding: 0; overflow: hidden; } .tc-faq-q { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 16px; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #fff; text-align: left; cursor: auto; transition: color .25s; } .tc-faq-q:hover { color: var(--gold); } .tc-faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(212,175,55,.3); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gold); transition: transform .35s var(--ease-spring), background .25s; } .tc-faq-item.open .tc-faq-icon { transform: rotate(45deg); background: rgba(212,175,55,.1); } .tc-faq-a { max-height: 0; overflow: hidden; font-size: 14px; color: var(--text-muted); line-height: 1.8; transition: max-height .45s var(--ease-out), padding .35s; padding: 0; } .tc-faq-item.open .tc-faq-a { max-height: 300px; padding-bottom: 22px; } /* ════════════════════════════════════════════════════════════ v10 — VEHICLE ATTRIBUTES GRID (International Agency Style) Sixt · Europcar · Hertz · Avis level ════════════════════════════════════════════════════════════ */ /* ── DB columns stored in JSON: attrs field ── */ /* attrs = {"transmission":"auto","doors":5,"seats":5,"bags":3,"ac":"bizone", "gps":true,"bluetooth":true,"usb":"usb-c","camera":"360", "parking":true,"fuel":"diesel","hybrid":false,"panoramic":false, "baby_seat":false,"heated_seats":false,"carplay":true, "blind_spot":false,"acc":false,"luggage_net":false} */ .tc-vehicle-attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 14px; } .tc-attr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 8px 5px 7px; transition: all .25s var(--ease-out); min-height: 64px; } .tc-attr:hover { background: rgba(212,175,55,.06); border-color: rgba(212,175,55,.28); transform: translateY(-1px); } .tc-attr-icon { font-size: 17px; line-height: 1; } .tc-attr-label { font-size: 9px; font-weight: 700; font-family: var(--font-accent); letter-spacing: .05em; color: var(--text-muted); text-align: center; line-height: 1.2; text-transform: uppercase; } .tc-attr-value { font-size: 10px; font-weight: 700; color: var(--text-2); text-align: center; line-height: 1; } /* Color states */ .tc-attr--yes .tc-attr-value { color: #4ade80; } .tc-attr--gold .tc-attr-value { color: var(--gold-light); } .tc-attr--blue .tc-attr-value { color: #60a5fa; } .tc-attr--no { opacity: .3; filter: grayscale(1); } .tc-attr--no .tc-attr-value { color: var(--text-muted); } .tc-attr--premium { background: rgba(212,175,55,.05); border-color: rgba(212,175,55,.22); } .tc-attr--premium .tc-attr-icon { filter: drop-shadow(0 0 5px rgba(212,175,55,.5)); } .tc-attr--premium .tc-attr-value { color: var(--gold); } /* Tooltip */ .tc-attr[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--black-4); border: 1px solid rgba(212,175,55,.25); border-radius: 7px; padding: 5px 12px; font-size: 10px; font-weight: 600; font-family: var(--font-body); color: var(--text); white-space: nowrap; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; } /* ── Legend bar ── */ .tc-attrs-legend { background: var(--black-3); border: 1px solid rgba(212,175,55,.12); border-radius: var(--radius-lg); padding: 22px 28px; margin-bottom: 36px; } .tc-attrs-legend-title { font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .tc-attrs-legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .tc-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); font-weight: 500; } .tc-legend-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; } /* ── Includes row (below attrs, above footer) ── */ .tc-vehicle-includes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } .tc-vehicle-spec-inc { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #4ade80; font-weight: 600; background: rgba(74,222,128,.07); border: 1px solid rgba(74,222,128,.18); border-radius: 5px; padding: 3px 9px; } /* ════════════════════════════════════════════════════════════ v10 — BOOKING TUNNEL (Réservation — 3 étapes custom) Remplace le shortcode plugin basique ════════════════════════════════════════════════════════════ */ /* Wrapper */ .tc-booking-tunnel { background: var(--black-3); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-lg); overflow: hidden; } /* Step header tabs */ .tc-booking-steps { display: flex; border-bottom: 1px solid rgba(255,255,255,.07); background: var(--black-4); } .tc-booking-step-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border: none; background: none; cursor: pointer; transition: all .3s; position: relative; font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .tc-booking-step-tab::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease-out); } .tc-booking-step-tab.active { color: var(--gold-light); } .tc-booking-step-tab.active::after { transform: scaleX(1); } .tc-booking-step-tab.done { color: #4ade80; } .tc-booking-step-num { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; transition: all .3s; } .tc-booking-step-tab.done .tc-booking-step-num { background: rgba(74,222,128,.15); border-color: #4ade80; } .tc-booking-step-tab.active .tc-booking-step-num { background: var(--gold-dim); border-color: var(--gold); } /* Panels */ .tc-booking-panel { display: none; padding: 28px; } .tc-booking-panel.active { display: block; } /* Step 1: Vehicle selector */ .tc-booking-vehicles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .tc-booking-vehicles::-webkit-scrollbar { width: 4px; } .tc-booking-vehicles::-webkit-scrollbar-track { background: var(--black-4); border-radius: 4px; } .tc-booking-vehicles::-webkit-scrollbar-thumb { background: rgba(212,175,55,.3); border-radius: 4px; } .tc-booking-vehicle-opt { border: 1.5px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 10px; cursor: pointer; transition: all .2s var(--ease-out); background: var(--black-4); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; } .tc-booking-vehicle-opt:hover { border-color: rgba(212,175,55,.35); background: rgba(212,175,55,.04); transform: translateY(-2px); } .tc-booking-vehicle-opt.selected { border-color: var(--gold); background: rgba(212,175,55,.08); box-shadow: 0 0 0 1px rgba(212,175,55,.3), inset 0 0 20px rgba(212,175,55,.04); } .tc-booking-vehicle-opt.selected::before { content: '✓'; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; background: var(--gold); border-radius: 50%; font-size: 10px; font-weight: 900; color: #000; display: flex; align-items: center; justify-content: center; line-height: 18px; text-align: center; } .tc-bv-img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: 6px; margin-bottom: 0; background: var(--black-3); } .tc-bv-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 0; line-height: 1.2; } .tc-bv-cat { font-size: 9px; font-weight: 700; font-family: var(--font-accent); letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0; } .tc-bv-price { font-family: var(--font-display); font-size: 17px; font-weight: 700; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tc-bv-price-label { font-size: 10px; color: var(--text-muted); } /* Step 2: Dates form */ .tc-booking-form { display: grid; gap: 16px; } .tc-bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tc-bf-group { display: flex; flex-direction: column; gap: 6px; } .tc-bf-label { font-size: 11px; font-weight: 700; font-family: var(--font-accent); letter-spacing: .07em; color: var(--gold); text-transform: uppercase; } .tc-bf-input, .tc-bf-select { background: var(--black-4); border: 1.5px solid rgba(255,255,255,.09); border-radius: var(--radius-sm); padding: 11px 14px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text); outline: none; transition: border-color .25s, box-shadow .25s; width: 100%; color-scheme: dark; } .tc-bf-input:focus, .tc-bf-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.12); } .tc-bf-input::placeholder { color: var(--text-muted); } .tc-bf-select option { background: #1e1e2a; color: #ededf0; } /* Duration badge */ .tc-bf-duration { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--gold-dim); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; font-weight: 700; font-family: var(--font-accent); color: var(--gold-light); letter-spacing: .04em; display: none; } .tc-bf-duration.visible { display: flex; } /* Extras checkboxes */ .tc-bf-extras { display: flex; flex-direction: column; gap: 8px; } .tc-bf-extra { display: flex; align-items: center; justify-content: space-between; background: var(--black-4); border: 1.5px solid rgba(255,255,255,.07); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: all .25s; gap: 12px; } .tc-bf-extra:hover { border-color: rgba(212,175,55,.3); background: rgba(212,175,55,.04); } .tc-bf-extra.checked { border-color: var(--gold); background: rgba(212,175,55,.07); } .tc-bf-extra-left { display: flex; align-items: center; gap: 10px; } .tc-bf-extra-icon { font-size: 20px; } .tc-bf-extra-info {} .tc-bf-extra-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 1px; } .tc-bf-extra-desc { font-size: 11px; color: var(--text-muted); } .tc-bf-extra-price { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--gold); white-space: nowrap; } .tc-bf-extra-cb { display: none; } .tc-bf-extra-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all .2s; flex-shrink: 0; color: transparent; } .tc-bf-extra.checked .tc-bf-extra-check { background: var(--gold); border-color: var(--gold); color: #000; } /* Step 3: Summary + Contact */ .tc-booking-summary { background: var(--black-4); border: 1px solid rgba(212,175,55,.15); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .tc-bs-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; } .tc-bs-row:last-child { border-bottom: none; } .tc-bs-label { color: var(--text-muted); font-weight: 500; } .tc-bs-value { color: var(--text); font-weight: 600; text-align: right; } .tc-bs-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(212,175,55,.2); } .tc-bs-total-label { font-family: var(--font-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; } .tc-bs-total-price { font-family: var(--font-display); font-size: 32px; font-weight: 700; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tc-bs-per-day { font-size: 12px; color: var(--text-muted); margin-left: 6px; } /* Contact fields */ .tc-booking-contact { display: grid; gap: 12px; } .tc-bf-row-3 { grid-template-columns: 1fr 1fr 1fr; } /* Navigation buttons */ .tc-booking-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; } .tc-booking-btn-next { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; border: none; border-radius: var(--radius-sm); padding: 12px 28px; font-size: 13px; font-weight: 800; font-family: var(--font-accent); letter-spacing: .06em; cursor: pointer; transition: all .25s; flex: 1; min-width: 140px; display: flex; align-items: center; justify-content: center; gap: 8px; } .tc-booking-btn-next:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(212,175,55,.35); } .tc-booking-btn-back { background: none; border: 1.5px solid rgba(255,255,255,.12); color: var(--text-muted); border-radius: var(--radius-sm); padding: 12px 20px; font-size: 13px; font-weight: 600; font-family: var(--font-accent); cursor: pointer; transition: all .25s; } .tc-booking-btn-back:hover { border-color: rgba(255,255,255,.3); color: var(--text); } .tc-booking-btn-wa { background: rgba(37,211,102,.12); border: 1.5px solid rgba(37,211,102,.3); color: #25d366; border-radius: var(--radius-sm); padding: 12px 20px; font-size: 13px; font-weight: 700; font-family: var(--font-accent); cursor: pointer; transition: all .25s; display: flex; align-items: center; gap: 6px; text-decoration: none; } .tc-booking-btn-wa:hover { background: rgba(37,211,102,.22); transform: translateY(-2px); } /* Submit button */ .tc-booking-btn-submit { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #000; border: none; border-radius: var(--radius-sm); padding: 14px 36px; font-size: 14px; font-weight: 800; font-family: var(--font-accent); letter-spacing: .06em; cursor: pointer; transition: all .3s; width: 100%; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; } .tc-booking-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(212,175,55,.4); } .tc-booking-btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* Success state */ .tc-booking-success { display: none; text-align: center; padding: 48px 28px; } .tc-booking-success.active { display: block; } .tc-booking-success-icon { font-size: 64px; margin-bottom: 20px; animation: bounceIn .6s var(--ease-spring); } .tc-booking-success-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--gold); margin-bottom: 10px; } .tc-booking-success-desc { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 24px; } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } /* Airport delivery cost badge */ .tc-delivery-cost { background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.2); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; color: var(--text-2); line-height: 1.6; display: none; margin-top: 8px; } .tc-delivery-cost.visible { display: block; } .tc-delivery-cost strong { color: var(--gold); } /* ════════════════════════════════════════════════════════════ v10 — RESPONSIVE PATCHES ════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .tc-booking-vehicles { grid-template-columns: 1fr; } .tc-bf-row { grid-template-columns: 1fr; } .tc-vehicle-attrs { grid-template-columns: repeat(3, 1fr); } .tc-attrs-legend-grid { grid-template-columns: repeat(2, 1fr); } .tc-booking-panel { padding: 18px; } } @media (max-width: 480px) { .tc-booking-step-tab span:last-child { display: none; } } /* ════════════════════════════════════════════════════════════ TARGARYEN CAR v11 — HEADER & FOOTER REDESIGN Transparent scroll · Announcement bar · Multilang · Airports ════════════════════════════════════════════════════════════ */ /* ── v11 Header variables ───────────────────────────────── */ :root { --header-h-v11: 76px; --announce-h: 34px; } /* ── Skip link ──────────────────────────────────────────── */ .tc-skip-link { position: absolute; top: -100px; left: 1rem; z-index: 9999; background: var(--gold); color: var(--black); padding: .5rem 1rem; font-family: var(--font-accent); font-size: .75rem; font-weight: 700; text-decoration: none; border-radius: 4px; transition: top .2s; } .tc-skip-link:focus { top: 1rem; } /* ── Announcement Bar ───────────────────────────────────── */ .tc-announcement { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: var(--announce-h); background: rgba(212,175,55,.07); border-bottom: 1px solid rgba(212,175,55,.12); overflow: hidden; display: flex; align-items: center; transition: opacity .3s, transform .3s; } .tc-announcement.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; } .tc-announcement-track { display: flex; gap: 2.5rem; white-space: nowrap; animation: tc-marquee 28s linear infinite; font-family: var(--font-accent); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .tc-ann-sep { opacity: .35; } @keyframes tc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Header v11 ─────────────────────────────────────────── */ #tc-header { position: fixed; top: var(--announce-h); left: 0; right: 0; z-index: 1000; height: var(--header-h-v11); background: transparent; transition: background .4s cubic-bezier(.4,0,.2,1), backdrop-filter .4s, border-color .4s, box-shadow .4s, top .3s; border-bottom: 1px solid transparent; } #tc-header.scrolled { background: rgba(8,8,13,.93); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-bottom-color: var(--glass-border); box-shadow: 0 8px 40px rgba(0,0,0,.45); top: 0; } #tc-header.scrolled ~ .tc-announcement, body.scrolled .tc-announcement { opacity: 0; pointer-events: none; } .tc-header-inner { max-width: 1320px; margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* ── Logo v11 ───────────────────────────────────────────── */ .tc-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .tc-logo-hex { flex-shrink: 0; transition: transform .3s var(--ease-spring); } .tc-logo:hover .tc-logo-hex { transform: rotate(-5deg) scale(1.08); } .tc-logo-texts { display: flex; flex-direction: column; line-height: 1; } .tc-logo-brand { font-family: var(--font-accent); font-size: .88rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-pale) 40%, var(--gold) 60%, var(--gold-light) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: tc-shimmer 4s linear infinite; } .tc-logo-brand em { font-style: normal; } .tc-logo-sub { font-family: var(--font-display); font-size: .65rem; font-style: italic; letter-spacing: .06em; color: var(--text-muted); margin-top: 2px; } @keyframes tc-shimmer { from { background-position: 0 center; } to { background-position: 200% center; } } /* ── Desktop Nav v11 ────────────────────────────────────── */ .tc-nav-desktop ul { display: flex; align-items: center; gap: 2rem; list-style: none; } .tc-nav-desktop a { font-family: var(--font-accent); font-size: .73rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; position: relative; padding: .3rem 0; transition: color .25s; } .tc-nav-desktop a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--gold); transition: width .3s var(--ease-out), left .3s var(--ease-out); } .tc-nav-desktop a:hover, .tc-nav-desktop a.tc-nav-active { color: var(--text); } .tc-nav-desktop a:hover::after, .tc-nav-desktop a.tc-nav-active::after { width: 100%; left: 0; } .tc-nav-desktop a.tc-nav-active { color: var(--gold); } /* ── Header Right ───────────────────────────────────────── */ .tc-header-right { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } /* ── Lang Switcher v11 ──────────────────────────────────── */ .tc-lang-switcher { display: flex; align-items: center; gap: 2px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 40px; padding: .2rem .4rem; } .tc-lang-btn { display: flex; align-items: center; gap: .25rem; padding: .2rem .45rem; border-radius: 20px; background: transparent; border: none; cursor: pointer; text-decoration: none; transition: all .2s; color: var(--text-muted); } .tc-flag { font-size: .85rem; line-height: 1; } .tc-lcode { font-family: var(--font-accent); font-size: .65rem; font-weight: 700; letter-spacing: .08em; } .tc-lang-btn:hover { color: var(--text); background: rgba(212,175,55,.08); } .tc-lang-btn.active { color: var(--gold); background: rgba(212,175,55,.12); } .tc-lang-sep { width: 1px; height: 12px; background: var(--glass-border); flex-shrink: 0; } /* ── Reserve Button v11 ─────────────────────────────────── */ .tc-btn-reserve { display: inline-flex; align-items: center; gap: .45rem; padding: .52rem 1.1rem; background: var(--gold); color: var(--black); font-family: var(--font-accent); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; white-space: nowrap; } .tc-btn-reserve:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(212,175,55,.4); } /* ── WhatsApp Header Icon ───────────────────────────────── */ .tc-wa-header { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.2); color: #25d366; text-decoration: none; transition: all .2s; } .tc-wa-header:hover { background: rgba(37,211,102,.18); transform: translateY(-1px); } /* ── Hamburger v11 ──────────────────────────────────────── */ .tc-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; } .tc-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--gold); transition: all .3s var(--ease-out); transform-origin: center; } .tc-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .tc-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .tc-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* v11 mobile menu — DEPRECATED, tc-drawer overrides */ .tc-mobile-menu { position: fixed; top: calc(var(--announce-h) + var(--header-h-v11)); left: 0; right: 0; z-index: 999; background: rgba(8,8,13,.97); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-bottom: 1px solid var(--glass-border); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease-out), opacity .3s; } .tc-mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; } #tc-header.scrolled ~ .tc-mobile-menu { top: var(--header-h-v11); } .tc-mobile-menu-inner { padding: 1.5rem 1.5rem 2rem; max-width: 480px; } .tc-mobile-menu nav { display: flex; flex-direction: column; margin-bottom: 1.5rem; } .tc-mobile-menu nav a { font-family: var(--font-accent); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.04); transition: color .2s, transform .2s; transform: translateX(0); } .tc-mobile-menu.open nav a { animation: slideIn .35s calc(var(--i,0) * .06s) both; } .tc-mobile-menu nav a:hover { color: var(--gold); } @keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } .tc-mobile-lang { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .tc-mobile-lang-btn { display: flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-muted); text-decoration: none; font-family: var(--font-accent); font-size: .72rem; font-weight: 600; letter-spacing: .06em; transition: all .2s; } .tc-mobile-lang-btn.active, .tc-mobile-lang-btn:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.35); color: var(--gold); } .tc-mobile-cta { width: 100%; justify-content: center; margin-top: .5rem; } /* ── Body padding for fixed header ─────────────────────── */ body { padding-top: calc(var(--announce-h) + var(--header-h-v11)); } body.scrolled { padding-top: var(--header-h-v11); } /* Landing pages: no padding (full-screen hero) */ body.page-template-page-landing-fr, body.page-template-page-landing-en, body.page-template-page-landing-ar, body.page-template-page-landing-it { padding-top: 0 !important; } /* ══════════════════════════════════════════════════════════ FOOTER v11 ══════════════════════════════════════════════════════════ */ #tc-footer { background: var(--black); border-top: 1px solid var(--glass-border); position: relative; overflow: hidden; } #tc-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 700px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5; } /* ── Airport Strip ──────────────────────────────────────── */ .tc-footer-airports { background: rgba(212,175,55,.04); border-bottom: 1px solid var(--glass-border); } .tc-footer-airports-inner { max-width: 1320px; margin: 0 auto; padding: .8rem 2rem; display: flex; align-items: center; gap: 1.2rem; } .tc-airports-label { display: flex; align-items: center; gap: .4rem; font-family: var(--font-accent); font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; flex-shrink: 0; } .tc-airports-sep { width: 1px; height: 18px; background: var(--glass-border); flex-shrink: 0; } .tc-airports-list { display: flex; gap: .5rem; flex-wrap: wrap; } .tc-airport-chip { display: flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-border); text-decoration: none; transition: all .2s; } .tc-airport-chip:hover { background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.3); } .tc-ap-code { font-family: var(--font-accent); font-size: .65rem; font-weight: 700; color: var(--gold); letter-spacing: .06em; } .tc-ap-city { font-size: .65rem; color: var(--text-muted); } .tc-ap-price { font-size: .6rem; color: var(--green); font-family: var(--font-accent); } /* ── Footer Main Grid ───────────────────────────────────── */ .tc-footer-main { max-width: 1320px; margin: 0 auto; padding: 3rem 2rem 0; } .tc-footer-grid { display: grid; grid-template-columns: 1.5fr 1.2fr 1.2fr 1.1fr; gap: 3rem; } /* ── Footer Brand Col ───────────────────────────────────── */ .tc-footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 1rem; } .tc-footer-brand-name { font-family: var(--font-accent); font-weight: 900; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-pale) 40%, var(--gold) 60%, var(--gold-light) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: tc-shimmer 4s linear infinite; } .tc-footer-brand-name em { font-style: normal; } .tc-footer-desc { font-size: .8rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 1.2rem; max-width: 240px; } .tc-footer-social { display: flex; gap: .5rem; } .tc-social-btn { width: 34px; height: 34px; border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; transition: all .2s; } .tc-social-btn:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3); color: var(--gold); transform: translateY(-2px); } .tc-social-wa:hover { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.3); color: #25d366; } /* ── Footer Cols ────────────────────────────────────────── */ .tc-footer-col-title { font-family: var(--font-accent); font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--glass-border); } .tc-footer-links { list-style: none; display: flex; flex-direction: column; gap: .5rem; } .tc-footer-links a { font-size: .8rem; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: .4rem; transition: color .2s, transform .2s; } .tc-footer-links a::before { content: '\203A'; color: var(--gold); opacity: .5; font-size: .9rem; } .tc-footer-links a:hover { color: var(--text); transform: translateX(3px); } /* ── Footer Contact ─────────────────────────────────────── */ .tc-footer-contact-list { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.2rem; } .tc-fcontact-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .78rem; color: var(--text-muted); line-height: 1.5; } .tc-fcontact-icon { width: 26px; height: 26px; border-radius: 6px; background: rgba(212,175,55,.07); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; margin-top: 1px; } .tc-fcontact-item a { color: var(--gold-light); text-decoration: none; transition: color .2s; } .tc-fcontact-item a:hover { color: var(--gold-pale); } .tc-footer-wa-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25); border-radius: 8px; color: #25d366; font-size: .75rem; font-family: var(--font-accent); font-weight: 600; letter-spacing: .06em; text-decoration: none; transition: all .2s; } .tc-footer-wa-btn:hover { background: rgba(37,211,102,.18); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,211,102,.15); } /* ── Footer Lang ────────────────────────────────────────── */ .tc-footer-lang { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; } .tc-footer-lang-btn { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-muted); text-decoration: none; font-size: .8rem; font-family: var(--font-body); transition: all .2s; } .tc-footer-lang-btn:hover, .tc-footer-lang-btn.active { background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.3); color: var(--gold); } .tc-lang-code-small { margin-left: auto; font-size: .65rem; font-family: var(--font-accent); font-weight: 700; letter-spacing: .08em; opacity: .5; } .tc-footer-badge { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; font-size: .75rem; } .tc-footer-badge > span { font-size: 1.3rem; } .tc-footer-badge strong { display: block; color: var(--text); font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; } .tc-footer-badge span:last-child { font-size: .68rem; color: var(--text-muted); } /* ── Footer Bottom ──────────────────────────────────────── */ .tc-footer-divider { max-width: 1320px; margin: 2.5rem auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent); } .tc-footer-bottom { max-width: 1320px; margin: 0 auto; padding: 1.2rem 2rem 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .tc-footer-copy { font-size: .72rem; color: var(--text-muted); opacity: .6; } .tc-footer-copy span { color: var(--gold); opacity: 1; } .tc-footer-copy a { color: inherit; text-decoration: none; } .tc-footer-copy a:hover { color: var(--gold); opacity: 1; } .tc-footer-legal { display: flex; gap: 1.5rem; align-items: center; } .tc-footer-legal a { font-size: .68rem; font-family: var(--font-accent); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; opacity: .45; transition: opacity .2s; } .tc-footer-legal a:hover { opacity: 1; } /* ── Responsive v11 ─────────────────────────────────────── */ @media (max-width: 1100px) { .tc-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 900px) { .tc-nav-desktop, .tc-btn-reserve, .tc-wa-header { display: none; } .tc-hamburger { display: flex; } .tc-airports-list { display: none; } .tc-footer-airports-inner { justify-content: flex-start; } } @media (max-width: 640px) { .tc-footer-grid { grid-template-columns: 1fr; } .tc-footer-bottom { flex-direction: column; align-items: flex-start; } .tc-footer-main { padding: 2rem 1.2rem 0; } .tc-footer-divider { margin: 2rem 1.2rem 0; } .tc-footer-bottom { padding: 1rem 1.2rem 1.5rem; } .tc-header-inner { padding: 0 1.2rem; } } /* ── RTL support (Arabic) ───────────────────────────────── */ [dir="rtl"] .tc-header-inner { flex-direction: row-reverse; } [dir="rtl"] .tc-logo { flex-direction: row-reverse; } [dir="rtl"] .tc-footer-grid { direction: rtl; } [dir="rtl"] .tc-footer-links a { flex-direction: row-reverse; } [dir="rtl"] .tc-footer-links a:hover { transform: translateX(-3px); } [dir="rtl"] .tc-mobile-menu nav a { padding-right: 0; padding-left: 0; } /* ════════════════════════════════ v11 — RESERVATION UX UPGRADES ════════════════════════════════ */ /* Vehicle cards: no scroll, compact grid */ .tc-booking-vehicles { max-height: none !important; overflow-y: visible !important; } /* Card pulse on hover - invite to click */ .tc-booking-vehicle-opt:not(.selected) { animation: none; } @keyframes card-invite { 0%, 100% { border-color: rgba(255,255,255,.08); } 50% { border-color: rgba(212,175,55,.25); } } .tc-booking-vehicles:not(:has(.selected)) .tc-booking-vehicle-opt { animation: card-invite 2.5s ease infinite; } .tc-booking-vehicles:not(:has(.selected)) .tc-booking-vehicle-opt:nth-child(2) { animation-delay: .4s; } .tc-booking-vehicles:not(:has(.selected)) .tc-booking-vehicle-opt:nth-child(3) { animation-delay: .8s; } .tc-booking-vehicles:not(:has(.selected)) .tc-booking-vehicle-opt:nth-child(4) { animation-delay: 1.2s; } /* Auto-advance feedback flash */ .tc-booking-vehicle-opt.selected { animation: select-flash .4s ease forwards !important; } @keyframes select-flash { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.5); } 50% { box-shadow: 0 0 0 8px rgba(212,175,55,.15); } 100% { box-shadow: 0 0 0 1px rgba(212,175,55,.3), inset 0 0 20px rgba(212,175,55,.04); } } /* Vehicle search in step 1 */ #tc-veh-search:focus { border-color: rgba(212,175,55,.4); box-shadow: 0 0 0 3px rgba(212,175,55,.06); } /* Step 1 next btn — always visible (not just enabled) */ #tc-btn-step1-next:disabled { opacity: .35; cursor: not-allowed; } /* Airport dropdown improvements */ #pickup_airport option, #return_airport option { background: #1e1e2a; color: #ededf0; } /* ════════════════════════════════════════ v11 — MAIN PAGE COMPACT (moins de scroll) ════════════════════════════════════════ */ #tc-home-reservation { padding: 70px 0 !important; } #tc-why { padding: 70px 0 !important; } #tc-airports { padding: 70px 0 !important; } #tc-testimonials { padding: 70px 0 !important; } .tc-faq { padding: 70px 0 !important; } #tc-fleet-cta { padding: 50px 0 !important; } /* Smaller section headers */ #tc-home-reservation .tc-home-res-header, #tc-why .tc-section-header, #tc-airports .tc-section-header, #tc-testimonials .tc-section-header { margin-bottom: 36px !important; } /* Testimonials: horizontal row instead of stacked */ .tc-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } .tc-testimonials-grid .tc-reveal:last-child { margin-top: 0 !important; } /* FAQ: tighter spacing */ .tc-faq-grid { gap: 6px !important; } .tc-faq-item { margin-bottom: 0 !important; } .tc-faq-q { padding: 14px 18px !important; } /* Airports grid compact */ .tc-airports-grid { gap: 1px !important; } /* Why section cards compact */ .tc-why-grid { gap: 16px !important; } .tc-why-card { padding: 28px 24px !important; } @media (max-width: 900px) { .tc-testimonials-grid { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ════════════════════════════════════════ v11 FIX — Reservation cards clickable cursor:none global bloquait les clicks ════════════════════════════════════════ */ .tc-booking-vehicle-opt, .tc-booking-vehicle-opt *, .tc-booking-btn-next, .tc-booking-btn-back, .tc-booking-btn-submit, .tc-booking-btn-wa, .tc-booking-step-tab, .tc-bf-input, .tc-bf-select, .tc-bf-extra, .tc-booking-nav button, #tc-veh-search { cursor: pointer !important; pointer-events: auto !important; } .tc-bf-input, .tc-bf-select, #tc-veh-search { cursor: text !important; } /* ════════════════════════════════════════════ v11 — VEHICLE CARDS RESERVATION (redesign) ════════════════════════════════════════════ */ /* Override cursor:none for entire reservation tunnel */ .tc-booking-tunnel, .tc-booking-tunnel * { cursor: auto !important; pointer-events: auto !important; } .tc-booking-tunnel button, .tc-booking-tunnel .tc-booking-vehicle-opt, .tc-bv-btn-voir, .tc-bv-btn-choisir { cursor: pointer !important; } .tc-booking-tunnel input, .tc-booking-tunnel select { cursor: text !important; } select.tc-bf-select { cursor: pointer !important; } /* Card layout */ .tc-booking-vehicle-opt { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-radius: 10px; } /* Image wrap */ .tc-bv-img-wrap { position: relative; width: 100%; aspect-ratio: 16/8; overflow: hidden; background: var(--black-3); } .tc-bv-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .tc-booking-vehicle-opt:hover .tc-bv-img { transform: scale(1.04); } .tc-bv-badge-cat { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.65); color: var(--text-muted); font-family: var(--font-accent); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; } .tc-bv-badge-summer { position: absolute; top: 8px; right: 8px; background: rgba(239,68,68,.85); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 6px; } /* Card body */ .tc-bv-body { padding: 10px 12px 6px; flex: 1; } .tc-bv-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.2; } .tc-bv-pricing { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .tc-bv-price { font-family: var(--font-display); font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tc-bv-price-label { font-size: 10px; color: var(--text-muted); } .tc-bv-price-summer { font-size: 10px; color: #f87171; margin-left: 4px; } /* Attribute chips */ .tc-bv-attrs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .tc-bv-attr-chip { font-size: 10px; font-family: var(--font-accent); font-weight: 600; color: var(--text-muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 2px 7px; } /* Card action buttons */ .tc-bv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.06); } .tc-bv-btn-voir, .tc-bv-btn-choisir { padding: 9px 0; border: none; background: none; font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: .05em; transition: background .2s, color .2s; cursor: pointer !important; pointer-events: auto !important; } .tc-bv-btn-voir { color: var(--text-muted); border-right: 1px solid rgba(255,255,255,.06); } .tc-bv-btn-voir:hover { background: rgba(255,255,255,.04); color: var(--text); } .tc-bv-btn-choisir { color: var(--gold); } .tc-bv-btn-choisir:hover { background: rgba(212,175,55,.1); } /* Selected state */ .tc-booking-vehicle-opt.selected { border-color: var(--gold); background: rgba(212,175,55,.06); box-shadow: 0 0 0 1px rgba(212,175,55,.25); } .tc-booking-vehicle-opt.selected .tc-bv-btn-choisir { background: rgba(212,175,55,.15); color: var(--gold); } .tc-booking-vehicle-opt.selected .tc-bv-btn-choisir::before { content: '✓ '; } /* ════════════════════════ VEHICLE POPUP ════════════════════════ */ .tc-vp-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s ease; cursor: pointer !important; pointer-events: auto !important; } .tc-vp-overlay.active { opacity: 1; } .tc-vp-modal { background: var(--black-3); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; position: relative; cursor: auto !important; animation: vp-in .3s ease; } @keyframes vp-in { from { transform: translateY(20px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .tc-vp-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.1); color: var(--text); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer !important; transition: background .2s; } .tc-vp-close:hover { background: rgba(255,255,255,.1); } .tc-vp-main-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: block; } .tc-vp-thumbs { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; } .tc-vp-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 2px solid transparent; cursor: pointer !important; transition: border-color .2s, transform .2s; opacity: .6; } .tc-vp-thumb:hover { opacity: 1; transform: scale(1.05); } .tc-vp-thumb.active { border-color: var(--gold); opacity: 1; } .tc-vp-info { padding: 14px 18px 10px; } .tc-vp-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .tc-vp-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 10px; } .tc-vp-price { font-family: var(--font-display); font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--gold-pale), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; align-items: baseline; gap: 4px; } .tc-vp-per { font-size: 13px; color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); } .tc-vp-btn-choisir { width: calc(100% - 28px); margin: 10px 14px 16px; padding: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #000; font-family: var(--font-accent); font-size: 13px; font-weight: 800; letter-spacing: .06em; border: none; border-radius: var(--radius-sm); cursor: pointer !important; transition: transform .2s, box-shadow .2s; } .tc-vp-btn-choisir:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,.3); } /* ══ COMPACT HOME ══════════════════════════════════════ */ #tc-home-reservation { padding: 40px 0; } #tc-why { padding: 50px 0; } #tc-airports { padding: 50px 0; } #tc-testimonials { padding: 50px 0; } .tc-faq { padding: 50px 0; } #tc-fleet-cta { padding: 36px 0; } .tc-section-header, .tc-faq header { margin-bottom: 28px !important; } .tc-why-item { padding: 28px 24px; } .tc-testimonial-card { padding: 24px; } /* ══ Lang dropdown — mobile only ═════════════════════════ */ .tc-lang-mobile { display: none; } .tc-lang-desktop { display: flex; } @media (max-width: 768px) { .tc-lang-desktop { display: none; } .tc-lang-mobile { display: block; position: relative; } } /* Trigger button */ .tc-lang-drop-trigger { display: flex; align-items: center; gap: .3rem; padding: .25rem .55rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; cursor: pointer; color: var(--text-muted); transition: all .2s; } .tc-lang-drop-trigger:hover { color: var(--gold); border-color: rgba(212,175,55,.3); } .tc-lang-drop-trigger .tc-flag { font-size: .85rem; } .tc-lang-drop-trigger .tc-lcode { font-family: var(--font-accent); font-size: .65rem; font-weight: 700; letter-spacing: .08em; } .tc-lang-arrow { transition: transform .25s; flex-shrink: 0; color: rgba(212,175,55,.5); } .tc-lang-dropdown.open .tc-lang-arrow { transform: rotate(180deg); } /* Dropdown list */ .tc-lang-drop-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; z-index: 9999; background: var(--black-3); border: 1px solid rgba(212,175,55,.18); border-radius: 12px; padding: 6px; list-style: none; margin: 0; box-shadow: 0 16px 48px rgba(0,0,0,.7); opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; transition: opacity .2s, transform .2s; } .tc-lang-dropdown.open .tc-lang-drop-list { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* Each item */ .tc-lang-drop-item { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; color: var(--text-muted); font-size: .8rem; font-family: var(--font-body); transition: background .15s, color .15s; } .tc-lang-drop-item:hover { background: rgba(212,175,55,.08); color: var(--text); } .tc-lang-drop-item.active { color: var(--gold); background: rgba(212,175,55,.1); } .tc-lang-drop-item .tc-flag { font-size: 1rem; } /* Separator between items */ .tc-lang-drop-list li + li { border-top: 1px solid rgba(255,255,255,.04); } /* ══ Social proof badge ═══════════════════════════════════ */ .tc-social-proof { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 16px; background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.2); border-radius: 40px; backdrop-filter: blur(8px); } .tc-proof-stars { color: #f0d060; font-size: 13px; letter-spacing: 1px; } .tc-proof-text { font-family: var(--font-body); font-size: 12px; color: rgba(237,237,240,.8); white-space: nowrap; } .tc-proof-text strong { color: #fff; } /* ══ Announcement bar step numbers ════════════════════════ */ .tc-ann-step { display: inline-flex; align-items: center; gap: 5px; } .tc-ann-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(212,175,55,.35); color: #d4af37; font-size: 9px; font-weight: 800; font-family: var(--font-accent); flex-shrink: 0; } @media (max-width: 640px) { .tc-proof-text { white-space: normal; font-size: 11px; } .tc-social-proof { border-radius: 12px; } } /* ══ Decoy badges on vehicle cards ════════════════════════ */ .tc-decoy-badge { position: absolute; top: 44px; left: 0; right: 0; background: linear-gradient(135deg, rgba(14,10,0,.82), rgba(30,20,0,.75)); backdrop-filter: blur(4px); border-top: 1px solid rgba(212,175,55,.15); border-bottom: 1px solid rgba(212,175,55,.15); padding: 5px 12px; font-size: 11px; font-weight: 600; color: rgba(237,237,240,.9); font-family: var(--font-body); z-index: 4; text-align: center; letter-spacing: .02em; } .tc-decoy-badge strong { color: #f0d060; } .tc-decoy-fire, .tc-decoy-eye { font-style: normal; } /* ══ Urgency pill on reservation page ═════════════════════ */ .tc-urgency-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: rgba(255,160,0,.08); border: 1px solid rgba(255,160,0,.25); border-radius: 40px; font-size: 11.5px; color: rgba(237,237,240,.85); font-family: var(--font-body); } .tc-urgency-pill strong { color: #f0a020; } /* ══ Sticky storytelling bar ══════════════════════════════ */ .tc-sticky-story { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9996; background: rgba(8,8,13,.92); backdrop-filter: blur(16px); border-top: 1px solid rgba(212,175,55,.2); padding: 10px 24px; transform: translateY(100%); transition: transform .4s cubic-bezier(.16,1,.3,1); pointer-events: none; } .tc-sticky-story.visible { transform: translateY(0); pointer-events: all; } .tc-sticky-story-inner { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; } .tc-story-step { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(237,237,240,.35); font-family: var(--font-body); transition: color .4s, opacity .4s; white-space: nowrap; } .tc-story-step.tc-story-active { color: rgba(237,237,240,.9); } .tc-story-step.tc-story-active .tc-story-num { background: var(--gold); color: #000; } .tc-story-step strong { color: #f0d060; } .tc-story-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(212,175,55,.2); color: rgba(212,175,55,.6); font-size: 9px; font-weight: 800; font-family: var(--font-accent); transition: background .4s, color .4s; flex-shrink: 0; } .tc-story-sep { color: rgba(212,175,55,.25); font-size: 13px; flex-shrink: 0; } .tc-story-cta { margin-left: 16px; padding: 6px 18px; background: var(--gold); color: #000; border-radius: 40px; font-family: var(--font-accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: opacity .2s; } .tc-story-cta:hover { opacity: .85; } @media (max-width: 768px) { .tc-sticky-story-inner { gap: 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } .tc-story-sep { display: none; } .tc-story-step { font-size: 11px; } .tc-story-step:not(.tc-story-active) { display: none; } .tc-sticky-story { padding: 10px 16px; } } /* ══ Slide 1 two-column layout ════════════════════════════ */ .tc-slide1-layout { display: flex; align-items: center; gap: 48px; width: 100%; padding-top: var(--header-h); min-height: 88svh; } .tc-slide1-layout .tc-slide-inner { flex: 1; min-width: 0; } /* ══ Visual proof panel ════════════════════════════════════ */ .tc-visual-proof { flex-shrink: 0; width: 320px; display: flex; flex-direction: column; gap: 12px; animation: tc-proof-float 6s ease-in-out infinite; } @keyframes tc-proof-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Google Reviews box */ .tc-reviews-box { background: rgba(14,14,20,.85); border: 1px solid rgba(212,175,55,.18); border-radius: 16px; padding: 16px; backdrop-filter: blur(20px); box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03); } .tc-reviews-header { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06); } .tc-reviews-title { font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: rgba(237,237,240,.7); flex: 1; } .tc-reviews-score { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; } .tc-reviews-stars-sm { color: #fbbc05; font-size: 11px; } .tc-review-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .tc-review-item:last-child { border-bottom: none; } .tc-review-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--gold); color: #000; display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-size: 12px; font-weight: 800; } .tc-review-name { font-size: 11.5px; font-weight: 700; color: rgba(237,237,240,.9); font-family: var(--font-body); display: flex; align-items: center; gap: 4px; } .tc-review-country { font-size: 13px; } .tc-review-stars { color: #fbbc05; font-size: 10px; margin: 2px 0; } .tc-review-text { font-size: 11px; color: rgba(237,237,240,.55); font-family: var(--font-body); line-height: 1.5; font-style: italic; } .tc-reviews-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 10.5px; color: rgba(237,237,240,.4); font-family: var(--font-accent); } .tc-reviews-badge { color: #4ade80; font-weight: 700; font-size: 10px; } /* Airport proof mini card */ .tc-airport-proof { display: flex; align-items: center; gap: 12px; background: rgba(14,14,20,.8); border: 1px solid rgba(74,222,128,.2); border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(12px); } .tc-airport-proof-icon { font-size: 22px; flex-shrink: 0; } .tc-airport-proof-title { font-family: var(--font-accent); font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .04em; } .tc-airport-proof-sub { font-size: 10px; color: rgba(237,237,240,.45); font-family: var(--font-body); margin-top: 2px; } .tc-airport-proof-free { margin-left: auto; flex-shrink: 0; background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.3); border-radius: 20px; padding: 3px 10px; font-family: var(--font-accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; } @media (max-width: 1024px) { .tc-slide1-layout { display: block; } .tc-slide1-layout .tc-slide-inner { padding-top: 0; } .tc-visual-proof { animation: none !important; position: static !important; width: 100% !important; max-width: 420px !important; margin: 24px auto 0 auto !important; } .tc-reviews-box { margin-bottom: 12px; } } @media (max-width: 768px) { .tc-visual-proof { max-width: 100% !important; margin: 20px 0 0 0 !important; } .tc-reviews-box { padding: 12px; } .tc-review-text { font-size: 10.5px; } } /* ══ Airport scene slide bg ════════════════════════════════ */ .tc-slide-bg-airport { position: absolute; inset: 0; overflow: visible; z-index: 0; } .tc-airport-scene { position: absolute; inset: 0; width: 100%; height: 100%; } /* Left gradient — text legibility, mais laisse la scène visible à droite */ .tc-slide-bg-airport::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,10,20,.96) 0%, rgba(6,10,20,.82) 38%, rgba(6,10,20,.40) 58%, rgba(6,10,20,.05) 78%, transparent 100% ); pointer-events: none; z-index: 1; } /* ══ Discount popup — longue durée ════════════════════════ */ .tc-disc-popup { position: fixed; bottom: 90px; right: 24px; z-index: 9990; width: 300px; background: var(--black-3); border: 1px solid rgba(212,175,55,.35); border-radius: 20px; padding: 24px 20px 20px; box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); animation: tc-popup-in .4s cubic-bezier(.16,1,.3,1); } @keyframes tc-popup-in { from { opacity:0; transform: translateY(20px) scale(.95); } to { opacity:1; transform: translateY(0) scale(1); } } .tc-disc-popup.tc-disc-popup-out { animation: tc-popup-out .3s ease forwards; } @keyframes tc-popup-out { to { opacity:0; transform: translateY(12px) scale(.95); } } .tc-disc-popup-close { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; color: rgba(237,237,240,.3); font-size: 14px; line-height: 1; } .tc-disc-popup-close:hover { color: rgba(237,237,240,.7); } .tc-disc-popup-icon { font-size: 28px; text-align: center; margin-bottom: 6px; } .tc-disc-popup-title { text-align: center; font-family: var(--font-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; color: rgba(237,237,240,.6); text-transform: uppercase; margin-bottom: 4px; } .tc-disc-popup-pct { text-align: center; font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; background: linear-gradient(135deg, #f7e8a0, #d4af37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; } .tc-disc-popup-body { font-family: var(--font-body); font-size: 13px; color: rgba(237,237,240,.75); text-align: center; line-height: 1.6; margin-bottom: 16px; } .tc-disc-popup-save { color: #4ade80; } .tc-disc-popup-body strong { color: #fff; } /* Discount table inside popup */ .tc-disc-popup-table { background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px; margin-bottom: 14px; } .tc-dpt-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; font-family: var(--font-body); font-size: 11.5px; color: rgba(237,237,240,.4); } .tc-dpt-row.active { background: rgba(212,175,55,.12); color: rgba(237,237,240,.9); } .tc-dpt-row.active .tc-dpt-pct { color: #f0d060; font-weight: 800; } .tc-dpt-pct { font-family: var(--font-accent); font-weight: 700; font-size: 11px; color: rgba(212,175,55,.5); } .tc-disc-popup-cta { text-align: center; font-family: var(--font-accent); font-size: 10px; letter-spacing: .06em; color: rgba(255,140,0,.7); font-weight: 700; } @media (max-width: 640px) { .tc-disc-popup { right: 12px; left: 12px; width: auto; bottom: 80px; } } /* Slide with airport scene — allow bg to breathe */ .tc-slide:has(.tc-slide-bg-airport) { overflow: visible; } /* Fallback for browsers without :has() */ .tc-slide[data-slide="2"] { overflow: visible; } /* ══ WA2 header button ════════════════════════════════════ */ .tc-wa2-header { position: relative; } .tc-wa2-badge { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); color: #000; font-family: var(--font-accent); font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--black); line-height: 1; } /* ═══════════════════════════════════════════════════════════════ TARGARYEN CAR v12 — NEW STYLES Season badges · Discount rows · Mobile CTA · Savings callout ═══════════════════════════════════════════════════════════════ */ /* ── Performance: film grain static (no animation = no repaint) ── */ /* Override any existing animated grain */ body::before { animation: none !important; background-position: center !important; } @media (max-width: 768px) { body::before { display: none !important; } } @media (prefers-reduced-motion: reduce) { body::before { display: none !important; } .tc-reveal { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ── Performance: reduce backdrop-blur on mobile ── */ @media (max-width: 768px) { .tc-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(14,14,22,.96) !important; } #tc-header.scrolled { backdrop-filter: none !important; background: rgba(8,8,13,.98) !important; } /* tc-mobile-menu backdrop — handled by .tc-drawer rules */ } /* ── Google Fonts: remove @import (handled by in head) ── */ /* @import removed — see wp_head preload */ /* ───────────────────────────────────────── SEASON BADGES — Reservation page ───────────────────────────────────────── */ .tc-season-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-family: var(--font-accent); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .tc-season-summer { background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(212,175,55,.1)); border: 1px solid rgba(251,191,36,.4); color: #fbbf24; } .tc-season-normal { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.2); color: #60a5fa; } #tc-season-badge { margin-bottom: 8px; } #tc-season-badge .tc-season-pill { font-size: .68rem; } /* ───────────────────────────────────────── BOOKING SUMMARY v12 — Discount rows ───────────────────────────────────────── */ .tc-bs-row-discount { background: rgba(96,165,250,.04); border-radius: 6px; margin: 2px 0; } .tc-bs-saving { font-weight: 800 !important; } .tc-bs-season-badge { } .tc-bs-season-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-family: var(--font-accent); font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .tc-bs-season-summer { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; } .tc-bs-season-normal { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.2); color: #93c5fd; } /* Savings callout */ .tc-bs-savings-callout { margin-top: 12px; padding: 10px 14px; background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(74,222,128,.06)); border: 1px solid rgba(74,222,128,.25); border-radius: 8px; font-size: 12px; color: #4ade80; text-align: center; font-weight: 600; } /* ───────────────────────────────────────── MOBILE STICKY CTA BAR ───────────────────────────────────────── */ #tc-mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9980; background: rgba(8,8,13,.97); border-top: 1px solid rgba(212,175,55,.18); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(100%); transition: opacity .35s cubic-bezier(0.16,1,.3,1), transform .35s cubic-bezier(0.16,1,.3,1); } #tc-mobile-cta-bar.visible { opacity: 1; transform: translateY(0); } .tc-mcta-inner { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; max-width: 500px; margin: 0 auto; } .tc-mcta-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 6px; border-radius: 10px; font-family: var(--font-accent); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: all .2s; line-height: 1; } .tc-mcta-btn-icon { font-size: 19px; line-height: 1; } .tc-mcta-phone { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text, #ededed); } .tc-mcta-phone:active { background: rgba(255,255,255,.12); } .tc-mcta-wa { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25); color: #25d366; } .tc-mcta-wa:active { background: rgba(37,211,102,.2); } .tc-mcta-book { background: linear-gradient(135deg, #d4af37, #a8861a); color: #000 !important; font-weight: 900; font-size: 10px; box-shadow: 0 4px 16px rgba(212,175,55,.28); } .tc-mcta-book:active { opacity: .88; transform: scale(.97); } @media (min-width: 769px) { #tc-mobile-cta-bar { display: none !important; } } @media (max-width: 768px) { #tc-mobile-cta-bar { display: block; } .tc-footer { padding-bottom: 90px !important; } } /* ───────────────────────────────────────── FLEET PAGE — Discount badges on cards ───────────────────────────────────────── */ .tc-fleet-card .tc-dur-disc-hint { display: none; /* shown via JS on flotte based on min days in discNormal */ } /* ───────────────────────────────────────── ADMIN PRICING PAGE ───────────────────────────────────────── */ .tc-admin-wrap .tc-admin-card { background: #1a1a27; border: 1px solid rgba(212,175,55,.15); border-radius: 12px; padding: 22px; margin-bottom: 20px; } .tc-admin-input:focus { outline: none; border-color: rgba(212,175,55,.5) !important; } /* ════════════════════════════════════════════════════════════ TARGARYEN CAR v12 — NOUVEAUX STYLES ════════════════════════════════════════════════════════════ */ /* ── Season pills (page réservation step 2) ── */ .tc-season-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 100px; font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: .07em; } .tc-season-summer { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; } .tc-season-normal { background: rgba(99,179,237,.08); border: 1px solid rgba(99,179,237,.2); color: #7ec8e3; } #tc-season-badge { margin-bottom: 6px; } /* ── Summary season & savings ── */ .tc-bs-season-badge { margin-bottom: 10px; } .tc-bs-season-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 100px; font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .07em; } .tc-bs-season-summer { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; } .tc-bs-season-normal { background: rgba(99,179,237,.08); border: 1px solid rgba(99,179,237,.2); color: #7ec8e3; } .tc-bs-season-mixed { background: linear-gradient(135deg, rgba(99,179,237,.08), rgba(251,191,36,.1)); border: 1px solid rgba(212,175,55,.3); color: #d4af37; } .tc-season-mixed { background: linear-gradient(135deg, rgba(99,179,237,.08), rgba(251,191,36,.1)); border: 1px solid rgba(212,175,55,.3); color: #d4af37; } .tc-bs-row-discount { background: rgba(74,222,128,.03); } .tc-bs-saving { color: #4ade80 !important; } .tc-bs-savings-callout { margin-top: 12px; padding: 10px 14px; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: #4ade80; text-align: center; } /* ── Fleet card — longue durée badge ── */ .tc-fleet-long-badge { font-family: var(--font-accent); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: #60a5fa; margin-top: 4px; display: flex; align-items: center; gap: 3px; } /* ── Sticky Mobile CTA Bar ── */ #tc-mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990; background: rgba(8,8,13,.97); border-top: 1px solid rgba(212,175,55,.18); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(100%); transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } #tc-mobile-cta-bar.visible { opacity: 1; transform: translateY(0); } .tc-mcta-inner { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; max-width: 480px; margin: 0 auto; } .tc-mcta-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; border-radius: 10px; font-family: var(--font-accent); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: all .2s; border: none; cursor: pointer; } .tc-mcta-btn-icon { font-size: 17px; line-height: 1; } .tc-mcta-phone { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text); } .tc-mcta-phone:hover { background: rgba(255,255,255,.12); color: #fff; } .tc-mcta-wa { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25); color: #25d366; } .tc-mcta-wa:hover { background: rgba(37,211,102,.2); } .tc-mcta-book { background: linear-gradient(135deg, var(--gold-light, #f7e8a0), var(--gold, #d4af37), var(--gold-dark, #a8861a)); color: #000; font-weight: 800; font-size: 10px; box-shadow: 0 4px 16px rgba(212,175,55,.3); } .tc-mcta-book:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,.4); color: #000; } @media (min-width: 769px) { #tc-mobile-cta-bar { display: none !important; } } @media (max-width: 768px) { #tc-mobile-cta-bar { display: block; } .tc-footer { padding-bottom: 90px; } } /* ── Performance: film grain off mobile, reduced blur ── */ @media (max-width: 768px) { body::before { display: none; } .tc-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(14,14,22,.96) !important; } #tc-header.scrolled { backdrop-filter: none !important; background: rgba(8,8,13,.98) !important; } } @media (prefers-reduced-motion: reduce) { body::before { display: none; } .tc-reveal { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ── Admin panel pricing ── */ .tc-admin-wrap { max-width: 1200px; } /* ════════════════════════════════════════════════════════════ TARGARYEN CAR v12 — MOBILE LAYOUTS COMPLETS 📱 Accueil · Flotte · Réservation · Aéroports ════════════════════════════════════════════════════════════ */ /* ══════════════════════ GLOBAL MOBILE BASE ══════════════════════ */ @media (max-width: 768px) { /* Sections padding */ .tc-section { padding: 56px 0 !important; } .tc-section-sm { padding: 40px 0 !important; } .tc-section-title { font-size: clamp(26px, 7vw, 38px) !important; } .tc-section-sub { font-size: 14px !important; } .tc-container { padding: 0 18px !important; } /* Header mobile — compact */ #tc-header { height: 60px !important; } .tc-nav-links { display: none; } .tc-hamburger { display: flex !important; } .tc-header-cta-desktop { display: none !important; } .tc-announcement-bar { font-size: 10px; padding: 6px 12px; } /* ── ACCUEIL (Hero) ── */ .tc-slide-title { font-size: clamp(28px, 9vw, 52px) !important; line-height: 1.1 !important; } .tc-slide-sub { font-size: 14px !important; margin-bottom: 24px !important; } .tc-slide-inner { padding: 80px 18px 120px !important; text-align: center; } .tc-hero-actions { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } .tc-hero-actions .tc-btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; font-size: 13px !important; } /* ── ACCUEIL: Vehicles section (homepage grid) ── */ .tc-vehicles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .tc-vehicle-card { border-radius: 12px !important; } .tc-vehicle-card .tc-vehicle-price-num { font-size: 18px !important; } /* ── ACCUEIL: Why section ── */ .tc-why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .tc-why-item { padding: 20px 14px !important; border-radius: 12px !important; } .tc-why-icon { font-size: 28px !important; } .tc-why-title { font-size: 13px !important; } .tc-why-text { font-size: 12px !important; display: none; } /* ── ACCUEIL: Testimonials ── */ .tc-testimonials-grid { grid-template-columns: 1fr !important; gap: 12px !important; } /* ── FLOTTE: Filters ── */ .tc-fleet-advanced-filters { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 14px !important; } .tc-adv-filter-group { width: 100% !important; justify-content: flex-start !important; } .tc-fleet-search-wrap { width: 100% !important; } #tc-fleet-search { width: 100% !important; } .tc-fleet-sort { flex-wrap: wrap; gap: 8px; } /* Flotte grid — 2 colonnes serrées */ .tc-fleet-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .tc-fleet-card { border-radius: 12px !important; } .tc-fleet-img { aspect-ratio: 4/3; } .tc-vehicle-name { font-size: 13px !important; } .tc-vehicle-price-num { font-size: 17px !important; } .tc-vehicle-includes { display: none !important; } /* trop compact */ .tc-fleet-season-badge { display: none !important; } .tc-fleet-card-actions { flex-direction: row !important; gap: 6px !important; } .tc-vehicle-btn { flex: 1 !important; padding: 8px 6px !important; font-size: 10px !important; text-align: center !important; } .tc-fleet-wa-btn { padding: 8px 10px !important; font-size: 14px !important; } /* ── AÉROPORTS ── */ .tc-airports-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; border-radius: 16px !important; } .tc-airport-card { padding: 18px 10px !important; border-radius: 12px !important; } .tc-airport-icon { font-size: 28px !important; margin-bottom: 6px !important; } .tc-airport-name { font-size: 11px !important; } .tc-airport-code { font-size: 13px !important; } .tc-airport-price { font-size: 11px !important; } /* ── RÉSERVATION: Steps header ── */ .tc-booking-steps { gap: 4px !important; padding: 12px 14px !important; } .tc-booking-step-tab { padding: 8px 10px !important; font-size: 10px !important; gap: 6px !important; } .tc-booking-step-tab span:last-child { display: none !important; } .tc-booking-step-num { width: 22px !important; height: 22px !important; font-size: 10px !important; } /* ── RÉSERVATION: Vehicle picker — swipe horizontal ── */ .tc-booking-vehicles { display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 10px !important; padding-bottom: 8px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; max-height: none !important; } .tc-booking-vehicles::-webkit-scrollbar { height: 3px !important; } .tc-booking-vehicle-opt { min-width: 200px !important; max-width: 200px !important; scroll-snap-align: start; flex-shrink: 0 !important; } .tc-bv-img-wrap { aspect-ratio: 16/9 !important; } .tc-bv-name { font-size: 13px !important; } .tc-bv-price { font-size: 16px !important; } .tc-bv-attrs { display: none !important; } /* ── RÉSERVATION: Form layout ── */ .tc-bf-row { grid-template-columns: 1fr !important; gap: 10px !important; } .tc-bf-row-3 { grid-template-columns: 1fr !important; } .tc-booking-panel { padding: 14px !important; } .tc-booking-contact { gap: 10px !important; } /* Info panel — hide on mobile (accordion instead) */ .tc-res-info-panel { display: none !important; /* trop lourd, on garde le tunnel clair */ } .tc-res-main-grid { grid-template-columns: 1fr !important; gap: 0 !important; } /* Summary — more compact */ .tc-bs-row { padding: 6px 0 !important; font-size: 12px !important; } .tc-bs-total-price { font-size: 24px !important; } /* ── FOOTER ── */ .tc-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .tc-footer-logo { font-size: 20px !important; } } /* ══════════════════════ VERY SMALL (≤ 380px) ══════════════════════ */ @media (max-width: 380px) { .tc-vehicles-grid, .tc-fleet-grid { grid-template-columns: 1fr !important; } .tc-why-grid { grid-template-columns: 1fr !important; } .tc-airports-grid { grid-template-columns: repeat(2, 1fr) !important; } .tc-booking-vehicle-opt { min-width: 170px !important; max-width: 170px !important; } } /* ══════════════════════ FLOTTE — Scroll indicator (mobile swipe hint) ══════════════════════ */ @media (max-width: 768px) { .tc-booking-vehicles-wrap { position: relative; } .tc-booking-vehicles-wrap::after { content: '→ swipe'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: linear-gradient(to left, var(--black-1) 60%, transparent); padding: 8px 14px 8px 40px; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--gold); opacity: .7; font-family: var(--font-accent); pointer-events: none; border-radius: 0 12px 12px 0; } } /* ══════════════════════ FLOTTE PAGE — Mobile sticky book bar per card (mini sticky bottom bar quand une carte est visible) ══════════════════════ */ @media (max-width: 768px) { /* Fleet filter toggle button (collapse/expand) */ #tc-fleet-filter-toggle { display: flex !important; width: 100%; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(212,175,55,.06); border: 1px solid rgba(212,175,55,.15); border-radius: 10px; color: var(--gold); font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; cursor: pointer; margin-bottom: 10px; } .tc-fleet-filter-toggle-arrow { transition: transform .25s; } .tc-fleet-advanced-filters.collapsed { display: none !important; } } @media (min-width: 769px) { #tc-fleet-filter-toggle { display: none !important; } } /* ══════════════════════ AÉROPORTS — Mobile card grid optimisé ══════════════════════ */ @media (max-width: 768px) { .tc-airports-section { padding: 48px 0 !important; } .tc-airport-card-price-free { font-size: 10px !important; padding: 3px 8px !important; } /* tc-airport-city kept visible on mobile */ .tc-airport-card { padding: 20px 12px !important; } .tc-airport-name { font-size: 14px !important; } .tc-airport-fee { font-size: 16px !important; } } /* ══════════════════════ HERO — Mobile specific ══════════════════════ */ @media (max-width: 768px) { /* Quick search bar on hero */ .tc-quick-search { flex-direction: column !important; gap: 10px !important; padding: 16px !important; border-radius: 16px !important; } .tc-qs-group { width: 100% !important; } .tc-qs-btn { width: 100% !important; justify-content: center !important; } /* Urgency bar */ .tc-urgency-pill { font-size: 10px !important; padding: 5px 12px !important; } /* Story steps */ .tc-sticky-story { padding: 10px 14px !important; gap: 6px !important; } .tc-sticky-story-inner { gap: 6px !important; overflow-x: auto !important; flex-wrap: nowrap !important; } .tc-story-step { min-width: auto; white-space: nowrap; } } /* ████████████████████████████████████████████████████████ TARGARYEN CAR v13 — CINEMATIC UPGRADE Particles · Split-text · Shimmer · Ambient glow Stats arcs · SVG map · Glassmorphism 2.0 · Ripple ████████████████████████████████████████████████████████ */ /* ══ NEW DESIGN TOKENS ══════════════════════════════════ */ :root { --gold-glow: 0 0 40px rgba(212,175,55,.35), 0 0 80px rgba(212,175,55,.15); --gold-glow-sm: 0 0 20px rgba(212,175,55,.3); --shimmer-dur: 2.2s; --particle-color: rgba(212,175,55,.6); --ambient-size: 600px; --v13-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ══ SPLIT TEXT — chaque mot entre individuellement ══════ */ .tc-split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.05em; } .tc-split-char { display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0; transition: transform .7s var(--v13-ease), opacity .5s ease; } .tc-split-ready .tc-split-char { transform: translateY(0) rotate(0deg); opacity: 1; } /* ══ AMBIENT CURSOR GLOW — sections light up on hover ═══ */ .tc-ambient-section { position: relative; overflow: hidden; } .tc-ambient-section::after { content: ''; position: absolute; width: var(--ambient-size); height: var(--ambient-size); border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,.06) 0%, transparent 70%); pointer-events: none; transform: translate(-50%, -50%); left: var(--mx, 50%); top: var(--my, 50%); transition: opacity .4s ease; opacity: 0; z-index: 0; } .tc-ambient-section:hover::after { opacity: 1; } /* ══ SHIMMER CARDS — glassmorphism 2.0 ══════════════════ */ .tc-shimmer { position: relative; overflow: hidden; } .tc-shimmer::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 30%, rgba(255,255,255,.04) 48%, rgba(212,175,55,.06) 50%, rgba(255,255,255,.04) 52%, transparent 70% ); background-size: 250% 100%; background-position: 200% center; transition: background-position .0s; pointer-events: none; z-index: 1; border-radius: inherit; } .tc-shimmer:hover::before { background-position: -50% center; transition: background-position var(--shimmer-dur) ease; } /* ══ RIPPLE EFFECT — boutons ════════════════════════════ */ .tc-ripple-wrap { position: relative; overflow: hidden; } .tc-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.22); transform: scale(0); animation: tc-ripple-anim .6s linear; pointer-events: none; } @keyframes tc-ripple-anim { to { transform: scale(4); opacity: 0; } } /* ══ HERO — v13 upgrades ════════════════════════════════ */ /* Particle canvas — behind content */ #tc-particle-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Hero title — cinematic entrance */ .tc-hero-title { overflow: visible !important; } .tc-hero-title em, .tc-hero-title strong { display: block; } /* em: italic gold — no overflow:hidden (kills gradient-clip) */ .tc-hero-title em { overflow: visible; } /* strong: overflow hidden for slide-in animation */ .tc-hero-title strong { overflow: hidden; } .tc-hero-title em::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent); transition: width 1.2s var(--v13-ease) .8s; } .tc-slide-active .tc-hero-title em::after { width: 100%; } /* Hero badge — pulse ring v13 */ .tc-hero-badge { animation: tc-badge-in .6s var(--v13-ease) .2s both; } @keyframes tc-badge-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } .tc-hero-badge-dot { position: relative; } .tc-hero-badge-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); animation: tc-dot-pulse 2s ease-in-out infinite; opacity: 0; } @keyframes tc-dot-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.5); opacity: 0; } } /* ══ STATS — circular arc progress ══════════════════════ */ .tc-stats-arcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; } @media (max-width: 768px) { .tc-stats-arcs { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; } } .tc-arc-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); transition: border-color .3s, transform .3s var(--v13-ease); position: relative; overflow: hidden; } .tc-arc-item:hover { border-color: rgba(212,175,55,.3); transform: translateY(-4px); } .tc-arc-svg { width: 72px; height: 72px; flex-shrink: 0; } .tc-arc-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 3.5; } .tc-arc-fill { fill: none; stroke: url(#tc-arc-grad); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 188; stroke-dashoffset: 188; transition: stroke-dashoffset 1.8s var(--v13-ease); transform: rotate(-90deg); transform-origin: center; } .tc-arc-center { font-family: var(--font-display); font-size: 18px; font-weight: 700; fill: #fff; dominant-baseline: middle; text-anchor: middle; } .tc-arc-label { font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .09em; color: var(--text-muted); text-transform: uppercase; text-align: center; line-height: 1.3; } /* ══ MAROC SVG MAP — interactive airports ════════════════ */ #tc-maroc-map-section { padding: 80px 0; background: var(--black-2); position: relative; overflow: hidden; } #tc-maroc-map-section::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(212,175,55,.04) 0%, transparent 70%); pointer-events: none; } .tc-map-layout { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; } @media (max-width: 1024px) { .tc-map-layout { grid-template-columns: 1fr; gap: 40px; } } .tc-map-svg-wrap { position: relative; } #tc-maroc-svg { width: 100%; max-width: 500px; margin: 0 auto; display: block; filter: drop-shadow(0 0 30px rgba(212,175,55,.08)); } .tc-map-country { fill: rgba(212,175,55,.06); stroke: rgba(212,175,55,.2); stroke-width: 1; transition: fill .3s; } .tc-map-dot { fill: var(--gold); stroke: rgba(212,175,55,.3); stroke-width: 8; cursor: pointer; transition: r .3s var(--v13-ease), stroke-width .3s; filter: drop-shadow(0 0 6px rgba(212,175,55,.8)); } .tc-map-dot:hover, .tc-map-dot.active { r: 7; stroke-width: 14; filter: drop-shadow(0 0 12px rgba(212,175,55,1)); } .tc-map-dot-free { fill: #4ade80; stroke: rgba(74,222,128,.3); filter: drop-shadow(0 0 6px rgba(74,222,128,.8)); } .tc-map-dot-free:hover, .tc-map-dot-free.active { filter: drop-shadow(0 0 12px rgba(74,222,128,1)); } .tc-map-label { font-family: var(--font-accent); font-size: 9px; font-weight: 700; fill: rgba(237,237,240,.7); letter-spacing: .05em; pointer-events: none; } .tc-map-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; animation: tc-map-pulse 2s ease-out infinite; } .tc-map-pulse-free { stroke: #4ade80; } @keyframes tc-map-pulse { 0% { r: 5; opacity: .8; } 100% { r: 20; opacity: 0; } } .tc-map-info-panel { background: var(--black-3); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 32px; min-height: 280px; display: flex; flex-direction: column; gap: 20px; transition: border-color .3s; } .tc-map-info-panel.active { border-color: rgba(212,175,55,.3); } .tc-map-info-city { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #fff; line-height: 1; transition: all .4s var(--v13-ease); } .tc-map-info-airport { font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; } .tc-map-info-fee { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--gold); } .tc-map-info-fee.free { color: #4ade80; } .tc-map-info-code { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.2); border-radius: 100px; font-family: var(--font-accent); font-size: 11px; font-weight: 800; color: var(--gold); letter-spacing: .1em; } .tc-map-info-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--gold); color: #000; border-radius: var(--radius-sm); font-family: var(--font-accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-decoration: none; transition: all .25s var(--v13-ease); align-self: flex-start; margin-top: auto; } .tc-map-info-btn:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--gold-glow-sm); color: #000; } .tc-map-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .tc-map-pill { padding: 5px 12px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 100px; font-family: var(--font-accent); font-size: 10px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all .2s; letter-spacing: .05em; } .tc-map-pill:hover, .tc-map-pill.active { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3); color: var(--gold); } .tc-map-pill.free { color: #4ade80; border-color: rgba(74,222,128,.2); } .tc-map-pill.free:hover, .tc-map-pill.free.active { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.4); } /* ══ WHY SECTION v13 — numbered steps horizontal ════════ */ .tc-why-v13 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--black-2); } @media (max-width: 1024px) { .tc-why-v13 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tc-why-v13 { grid-template-columns: 1fr; } } .tc-why-v13-item { padding: 36px 28px; border-right: 1px solid var(--glass-border); position: relative; transition: background .3s; overflow: hidden; } .tc-why-v13-item:last-child { border-right: none; } .tc-why-v13-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212,175,55,.04), transparent); opacity: 0; transition: opacity .35s; } .tc-why-v13-item:hover::before { opacity: 1; } .tc-why-v13-num { font-family: var(--font-display); font-size: 72px; font-weight: 300; line-height: 1; color: rgba(212,175,55,.08); position: absolute; top: 12px; right: 16px; transition: color .3s; pointer-events: none; } .tc-why-v13-item:hover .tc-why-v13-num { color: rgba(212,175,55,.14); } .tc-why-v13-icon { font-size: 28px; margin-bottom: 14px; display: block; } .tc-why-v13-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 10px; line-height: 1.2; } .tc-why-v13-text { font-size: 13px; color: var(--text-muted); line-height: 1.65; } .tc-why-v13-accent { display: block; margin-top: 14px; font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; } /* ══ TESTIMONIALS v13 — masonry-style quote cards ═══════ */ .tc-testimonials-v13 { columns: 3; column-gap: 20px; } @media (max-width: 1024px) { .tc-testimonials-v13 { columns: 2; } } @media (max-width: 640px) { .tc-testimonials-v13 { columns: 1; } } .tc-testi-v13 { break-inside: avoid; margin-bottom: 20px; background: var(--black-2); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; transition: border-color .3s, transform .3s var(--v13-ease); } .tc-testi-v13:hover { border-color: rgba(212,175,55,.25); transform: translateY(-3px); } .tc-testi-v13::before { content: '"'; position: absolute; top: -10px; left: 14px; font-family: var(--font-display); font-size: 100px; font-weight: 300; color: rgba(212,175,55,.07); line-height: 1; pointer-events: none; } .tc-testi-v13-stars { color: #f0d060; font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; } .tc-testi-v13-text { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 18px; font-style: italic; font-family: var(--font-display); } .tc-testi-v13-author { display: flex; align-items: center; gap: 12px; } .tc-testi-v13-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); flex-shrink: 0; } .tc-testi-v13-name { font-size: 13px; font-weight: 600; color: var(--text); } .tc-testi-v13-meta { font-size: 11px; color: var(--text-muted); } /* ══ FLEET CARDS v13 — depth parallax image + hover reveal ══ */ .tc-fleet-card { transform-style: preserve-3d; } .tc-fleet-img-wrap { position: relative; overflow: hidden; background: var(--black-3); } .tc-fleet-img-inner { transition: transform .6s var(--v13-ease); will-change: transform; } .tc-fleet-card:hover .tc-fleet-img-inner { transform: scale(1.08) translateY(-2%); } /* Category label top-left */ .tc-fleet-cat-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); border-radius: 100px; padding: 3px 10px; font-family: var(--font-accent); font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; z-index: 2; } /* Price overlay on hover */ .tc-fleet-price-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(8,8,13,.95) 0%, transparent 100%); padding: 24px 14px 10px; transform: translateY(100%); transition: transform .4s var(--v13-ease); z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; } .tc-fleet-card:hover .tc-fleet-price-overlay { transform: translateY(0); } .tc-fleet-overlay-price { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1; } .tc-fleet-overlay-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .tc-fleet-overlay-book { background: var(--gold); color: #000; padding: 7px 14px; border-radius: 8px; font-family: var(--font-accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-decoration: none; transition: background .2s; flex-shrink: 0; } .tc-fleet-overlay-book:hover { background: var(--gold-light); color: #000; } /* ══ SECTION TRANSITIONS — diagonal dividers ═════════════ */ .tc-section-divider { position: relative; height: 60px; overflow: hidden; pointer-events: none; z-index: 2; } .tc-section-divider svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block; } .tc-divider-dark { background: var(--black); } .tc-divider-dark2 { background: var(--black-2); } /* ══ HERO PARTICLE CANVAS ════════════════════════════════ */ #tc-hero-slider { position: relative; } /* ══ BOOKING TUNNEL v13 — step progress bar ════════════= */ .tc-booking-progress-wrap { height: 3px; background: rgba(255,255,255,.05); border-radius: 100px; overflow: hidden; margin-bottom: 0; } .tc-booking-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light)); border-radius: 100px; transition: width .6s var(--v13-ease); box-shadow: 0 0 12px rgba(212,175,55,.4); } /* ══ FLOATING LABELS — form inputs v13 ══════════════════ */ .tc-float-group { position: relative; } .tc-float-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 20px 14px 8px; color: var(--text); font-family: var(--font-body); font-size: 14px; transition: border-color .2s, background .2s; } .tc-float-input:focus { outline: none; border-color: rgba(212,175,55,.5); background: rgba(255,255,255,.06); } .tc-float-label { position: absolute; top: 14px; left: 14px; font-size: 13px; color: var(--text-muted); pointer-events: none; transition: all .2s var(--v13-ease); transform-origin: left; } .tc-float-input:focus ~ .tc-float-label, .tc-float-input:not(:placeholder-shown) ~ .tc-float-label { top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--gold); font-family: var(--font-accent); } /* ══ PRICE DISPLAY v13 — animated reveal ════════════════ */ .tc-price-reveal { animation: tc-price-pop .5s var(--v13-ease); } @keyframes tc-price-pop { 0% { transform: scale(.85) translateY(8px); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1) translateY(0); opacity: 1; } } /* ══ SCROLL SNAP SECTIONS — smooth ══════════════════════ */ .tc-snap-container { scroll-snap-type: y proximity; } .tc-snap-section { scroll-snap-align: start; } /* ══ GOLD LINE SEPARATOR ════════════════════════════════ */ .tc-gold-hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 40px 0; opacity: .3; } /* ══ LOADING SKELETON — cards before img load ════════════ */ .tc-skeleton { background: linear-gradient( 90deg, var(--black-3) 25%, var(--black-4) 50%, var(--black-3) 75% ); background-size: 200% 100%; animation: tc-skeleton 1.8s ease infinite; border-radius: 4px; } @keyframes tc-skeleton { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* ══ AMBIENT GLOW on airport section ════════════════════ */ #tc-airports { position: relative; } .tc-airports-grid .tc-airport-card { transition: transform .35s var(--v13-ease), border-color .3s, box-shadow .3s; } .tc-airports-grid .tc-airport-card:hover { box-shadow: 0 0 0 1px rgba(212,175,55,.3), 0 8px 32px rgba(212,175,55,.08); transform: translateY(-5px) scale(1.02); } /* ══ FOOTER — v13 gradient top border ════════════════════ */ footer.tc-footer::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent 100%); opacity: .3; margin-bottom: 0; } /* ══ WHY old grid — hide, replaced by v13 ════════════════ */ /* We keep .tc-why-grid but can coexist */ /* ══ MOBILE v13 ══════════════════════════════════════════ */ @media (max-width: 768px) { .tc-stats-arcs { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tc-arc-item { padding: 16px 10px; } .tc-arc-svg { width: 56px; height: 56px; } .tc-arc-label { font-size: 9px; } .tc-map-layout { grid-template-columns: 1fr; gap: 24px; } .tc-why-v13 { grid-template-columns: 1fr; } .tc-why-v13-item { border-right: none; border-bottom: 1px solid var(--glass-border); } .tc-testimonials-v13 { columns: 1; } #tc-maroc-map-section { padding: 48px 0; } .tc-map-info-panel { padding: 20px; } } /* ████████████████████████████████████████████████████████ TARGARYEN CAR v13 — MOBILE DRAWER NAVIGATION Side panel · Icon grid · Slide-in · Premium feel ████████████████████████████████████████████████████████ */ /* ══ OVERLAY ═════════════════════════════════════════════ */ .tc-drawer-overlay { position: fixed; inset: 0; z-index: 9997; background: rgba(0,0,0,0); pointer-events: none; transition: background .4s ease; } .tc-drawer-overlay.visible { background: rgba(0,0,0,.65); pointer-events: all; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ══ DRAWER PANEL ════════════════════════════════════════ */ .tc-drawer { /* Override old mobile-menu positioning */ position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; width: min(82vw, 340px) !important; z-index: 9998 !important; background: var(--black-2) !important; border-left: 1px solid rgba(212,175,55,.12) !important; transform: translateX(105%) !important; opacity: 1 !important; pointer-events: none; transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1) !important; display: flex !important; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Kill old backdrop on mobile */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .tc-drawer.open { transform: translateX(0) !important; pointer-events: all; } /* ══ DRAWER HEADER ═══════════════════════════════════════ */ .tc-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 18px; border-bottom: 1px solid rgba(212,175,55,.08); flex-shrink: 0; } .tc-drawer-logo { display: flex; align-items: center; gap: 8px; } .tc-drawer-logo-icon { font-size: 22px; line-height: 1; } .tc-drawer-logo-text { font-family: var(--font-accent); font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--text); text-transform: uppercase; } .tc-drawer-logo-text em { color: var(--gold); font-style: normal; margin-left: 3px; } .tc-drawer-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--text-muted); cursor: pointer; transition: all .2s; flex-shrink: 0; } .tc-drawer-close:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3); color: var(--gold); } /* ══ DRAWER NAV — liste avec icônes ══════════════════════ */ .tc-drawer-nav { display: flex; flex-direction: column; padding: 16px 16px 8px; gap: 6px; flex-shrink: 0; } .tc-drawer-nav-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); text-decoration: none; color: var(--text-muted); transition: all .25s cubic-bezier(0.22,1,.36,1); /* Entrance animation */ opacity: 0; transform: translateX(24px); } .tc-drawer.open .tc-drawer-nav-item { opacity: 1; transform: translateX(0); transition: opacity .4s ease calc(var(--data-i, 0) * 60ms + 80ms), transform .4s cubic-bezier(0.22,1,.36,1) calc(var(--data-i, 0) * 60ms + 80ms), background .2s, border-color .2s, color .2s; } /* Stagger via data-i attr → CSS custom prop trick */ .tc-drawer.open .tc-drawer-nav-item[data-i="0"] { transition-delay: 80ms, 80ms, 0s, 0s; } .tc-drawer.open .tc-drawer-nav-item[data-i="1"] { transition-delay: 140ms, 140ms, 0s, 0s; } .tc-drawer.open .tc-drawer-nav-item[data-i="2"] { transition-delay: 200ms, 200ms, 0s, 0s; } .tc-drawer.open .tc-drawer-nav-item[data-i="3"] { transition-delay: 260ms, 260ms, 0s, 0s; } .tc-drawer-nav-item:hover, .tc-drawer-nav-item:focus-visible { background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.2); color: var(--text); transform: translateX(3px); } .tc-drawer-nav-item.tc-current-page, .tc-drawer-nav-item:focus-visible { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.25); color: var(--gold); } /* Highlighted item (Réservation) */ .tc-drawer-nav-item.tc-dni-highlight { background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.2); color: var(--gold); } .tc-drawer-nav-item.tc-dni-highlight:hover { background: rgba(212,175,55,.14); border-color: rgba(212,175,55,.4); box-shadow: 0 4px 20px rgba(212,175,55,.15); } .tc-dni-icon { font-size: 22px; line-height: 1; flex-shrink: 0; width: 32px; text-align: center; } .tc-dni-label { flex: 1; font-family: var(--font-accent); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .tc-dni-arrow { font-size: 14px; color: rgba(212,175,55,.4); transition: transform .2s, color .2s; } .tc-drawer-nav-item:hover .tc-dni-arrow { transform: translateX(3px); color: var(--gold); } /* ══ CONTACT STRIP ═══════════════════════════════════════ */ .tc-drawer-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px 12px; flex-shrink: 0; } .tc-drawer-contact-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border-radius: 12px; text-decoration: none; font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: all .2s; opacity: 0; transform: translateY(8px); } .tc-drawer.open .tc-drawer-contact-btn { opacity: 1; transform: translateY(0); transition: opacity .35s ease 360ms, transform .35s ease 360ms, background .2s; } .tc-drawer-contact-btn span:first-child { font-size: 20px; } .tc-dct-phone { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--text-muted); } .tc-dct-phone:hover { background: rgba(255,255,255,.09); color: var(--text); } .tc-dct-wa { background: rgba(37,211,102,.08); border: 1px solid rgba(37,211,102,.2); color: #25d366; } .tc-dct-wa:hover { background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.4); } /* ══ MAIN CTA ════════════════════════════════════════════ */ .tc-drawer-cta { margin: 4px 16px 12px; padding: 15px 20px; background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light)); color: #000; font-family: var(--font-accent); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 14px; box-shadow: 0 4px 20px rgba(212,175,55,.25); transition: all .25s var(--v13-ease); flex-shrink: 0; opacity: 0; transform: translateY(8px); } .tc-drawer.open .tc-drawer-cta { opacity: 1; transform: translateY(0); transition: opacity .35s ease 420ms, transform .35s ease 420ms, box-shadow .2s, transform .2s; } .tc-drawer-cta:hover { box-shadow: 0 8px 32px rgba(212,175,55,.4); transform: translateY(-2px); color: #000; } /* ══ LANG SWITCHER ════════════════════════════════════════ */ .tc-drawer-lang { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 12px; border-top: 1px solid rgba(255,255,255,.04); flex-shrink: 0; } .tc-drawer-lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: var(--text-muted); font-family: var(--font-accent); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: all .2s; } .tc-drawer-lang-btn:hover, .tc-drawer-lang-btn.active { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.25); color: var(--gold); } /* ══ FOOTER ══════════════════════════════════════════════ */ .tc-drawer-footer { margin-top: auto; padding: 14px 20px 20px; display: flex; align-items: center; gap: 8px; font-family: var(--font-accent); font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,.04); flex-shrink: 0; } .tc-drawer-footer-dot { opacity: .4; } /* ══ HAMBURGER — v13 animated morphing ═══════════════════ */ .tc-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 10px 8px; background: none; border: none; cursor: pointer; } .tc-hamburger span { display: block; height: 1.5px; background: var(--text); border-radius: 2px; transition: all .35s cubic-bezier(0.22,1,.36,1); transform-origin: center; } .tc-hamburger span:nth-child(1) { width: 22px; } .tc-hamburger span:nth-child(2) { width: 16px; } .tc-hamburger span:nth-child(3) { width: 22px; } /* Morphs to ✕ when open */ .tc-hamburger[aria-expanded="true"] span:nth-child(1) { width: 22px; transform: translateY(6.5px) rotate(45deg); } .tc-hamburger[aria-expanded="true"] span:nth-child(2) { width: 0; opacity: 0; transform: scaleX(0); } .tc-hamburger[aria-expanded="true"] span:nth-child(3) { width: 22px; transform: translateY(-6.5px) rotate(-45deg); } /* ══ RESPONSIVE — show hamburger on mobile only ══════════ */ @media (max-width: 768px) { .tc-hamburger { display: flex !important; } .tc-nav-links { display: none !important; } .tc-header-cta-desktop { display: none !important; } /* Kill old mobile menu positioning */ .tc-mobile-menu:not(.tc-drawer) { display: none !important; } } @media (min-width: 769px) { .tc-drawer { display: none !important; } .tc-drawer-overlay { display: none !important; } } /* ══ BODY LOCK — prevent scroll when drawer open ════════ */ body.tc-drawer-open { overflow: hidden; /* Prevent layout shift */ padding-right: var(--scrollbar-w, 0px); } /* ══ CURRENT PAGE highlight ══════════════════════════════ */ body.home .tc-drawer-nav-item[href="/"], body.home .tc-drawer-nav-item[href*="khalidrentcar.com/"]:not([href*="/"]:not([href$="/"])) { color: var(--gold); background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.2); } /* ████████████████████████████████████████████████████████ /* ████████████████████████████████████████████████████████ BOTTOM TAB NAV — Mobile only, always visible Remplace l'ancien mobile CTA bar ████████████████████████████████████████████████████████ */ #tc-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997; background: rgba(8, 8, 13, 0.96); border-top: 1px solid rgba(212,175,55,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* Safe area for iPhone home bar */ padding-bottom: env(safe-area-inset-bottom, 0px); /* Hidden on desktop */ display: none; } /* Show only on mobile */ @media (max-width: 900px) { #tc-bottom-nav { display: block; } /* Pad body so content not hidden behind bar */ body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; } /* Hide the old mcta bar */ #tc-mobile-cta-bar { display: none !important; } /* Sticky story sits ABOVE bottom nav on mobile */ .tc-sticky-story { bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; border-bottom: 1px solid rgba(212,175,55,.1); } } .tc-bnav-inner { display: grid; grid-template-columns: repeat(4, 1fr); height: 62px; align-items: stretch; } .tc-bnav-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 6px 4px 4px !important; text-decoration: none !important; color: rgba(237,237,240,.45) !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-style: normal !important; transition: color .2s ease, background .2s ease !important; position: relative; -webkit-tap-highlight-color: rgba(212,175,55,.08); } .tc-bnav-item:hover, .tc-bnav-item.active { color: var(--gold) !important; background: rgba(212,175,55,.04) !important; } /* Top accent line on active */ .tc-bnav-item.active::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 0 0 3px 3px; } /* SVG icon */ .tc-bnav-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; transition: transform .2s cubic-bezier(.34,1.56,.64,1); } .tc-bnav-item:active .tc-bnav-icon { transform: scale(.82); } .tc-bnav-icon svg { display: block; color: inherit; } /* Label */ .tc-bnav-label { font-family: var(--font-accent), sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: inherit; } /* ── RÉSERVER — centre highlighted ────────────────────── */ .tc-bnav-reserve .tc-bnav-icon { width: 42px !important; height: 42px !important; background: linear-gradient(135deg, #a8861a, #d4af37, #f0d060); border-radius: 14px; margin-top: -10px; box-shadow: 0 4px 20px rgba(212,175,55,.4); color: #000 !important; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important; } .tc-bnav-reserve:hover .tc-bnav-icon, .tc-bnav-reserve.active .tc-bnav-icon { box-shadow: 0 6px 28px rgba(212,175,55,.55) !important; } .tc-bnav-reserve:active .tc-bnav-icon { transform: scale(.88) !important; box-shadow: 0 2px 10px rgba(212,175,55,.3) !important; } .tc-bnav-reserve .tc-bnav-label { color: var(--gold) !important; } /* Reserve never shows active accent bar */ .tc-bnav-reserve::before { display: none !important; } /* ████████████████████████████████████████████████████████ HAMBURGER — fix définitif, visible sur mobile ████████████████████████████████████████████████████████ */ /* Force visible + stylé sur mobile */ @media (max-width: 900px) { .tc-hamburger { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; width: 40px !important; height: 40px !important; padding: 8px !important; background: rgba(212,175,55,.08) !important; border: 1px solid rgba(212,175,55,.25) !important; border-radius: 10px !important; cursor: pointer !important; flex-shrink: 0 !important; position: relative !important; z-index: 1001 !important; } .tc-hamburger span { display: block !important; height: 2px !important; background: var(--gold) !important; border-radius: 2px !important; transition: all .3s cubic-bezier(.22,1,.36,1) !important; transform-origin: center !important; } .tc-hamburger span:nth-child(1) { width: 20px !important; } .tc-hamburger span:nth-child(2) { width: 14px !important; } .tc-hamburger span:nth-child(3) { width: 20px !important; } .tc-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; width: 20px !important; } .tc-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; width: 0 !important; } .tc-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; width: 20px !important; } } /* v15 — tc-reveal safety fallback */ .tc-reveal:not(.visible) { animation: tc-reveal-fallback .6s ease forwards; animation-delay: .8s; } @keyframes tc-reveal-fallback { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Fleet cards — always visible */ .tc-fleet-card { opacity: 1 !important; transform: none !important; } /* Booking tunnel — ALWAYS visible (never hidden by tc-reveal) */ #tc-booking-tunnel { opacity: 1 !important; transform: none !important; transition: none !important; } .tc-fleet-controls, .tc-fleet-sort, .tc-fleet-advanced-filters { opacity: 1 !important; transform: none !important; }