Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ART Touch - Luxury Vehicles</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #d4af37; | |
| --secondary-color: #1a1a1a; | |
| --accent-color: #2196F3; | |
| --text-color: #333; | |
| --light-bg: #f8f9fa; | |
| --dark-bg: #121212; | |
| --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; | |
| background: var(--light-bg); | |
| color: var(--text-color); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| /* Header Styles */ | |
| .header { | |
| background: rgba(26, 26, 26, 0.95); | |
| padding: 12px 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .menu-icon { | |
| color: white; | |
| font-size: 24px; | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 8px; | |
| } | |
| .menu-icon span { | |
| width: 20px; | |
| height: 2px; | |
| background: white; | |
| display: block; | |
| transition: var(--transition); | |
| } | |
| .menu-icon:hover span { | |
| background: var(--primary-color); | |
| } | |
| .logo { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .logo img { | |
| height: 35px; | |
| width: auto; | |
| object-fit: contain; | |
| filter: brightness(0) invert(1); | |
| } | |
| .phone-icon { | |
| color: white; | |
| font-size: 20px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.1); | |
| transition: var(--transition); | |
| } | |
| .phone-icon:hover { | |
| background: var(--primary-color); | |
| transform: scale(1.1); | |
| } | |
| /* Side Menu Styles */ | |
| .side-menu { | |
| position: fixed; | |
| top: 0; | |
| left: -300px; | |
| width: 300px; | |
| height: 100vh; | |
| background: var(--dark-bg); | |
| z-index: 1001; | |
| transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); | |
| overflow-y: auto; | |
| box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3); | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--primary-color) var(--dark-bg); | |
| } | |
| .side-menu::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .side-menu::-webkit-scrollbar-thumb { | |
| background: var(--primary-color); | |
| border-radius: 3px; | |
| } | |
| .side-menu.active { | |
| left: 0; | |
| } | |
| .menu-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.4s ease; | |
| backdrop-filter: blur(5px); | |
| } | |
| .menu-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .menu-header { | |
| padding: 24px; | |
| background: var(--secondary-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| } | |
| .menu-logo { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .menu-logo img { | |
| height: 40px; | |
| width: auto; | |
| object-fit: contain; | |
| filter: brightness(0) invert(1); | |
| } | |
| .close-menu { | |
| color: white; | |
| font-size: 28px; | |
| cursor: pointer; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| .close-menu:hover { | |
| background: var(--primary-color); | |
| transform: rotate(90deg); | |
| } | |
| .menu-items { | |
| padding: 20px 0; | |
| } | |
| .menu-item { | |
| padding: 16px 24px; | |
| color: #fff; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| font-size: 15px; | |
| transition: var(--transition); | |
| border-left: 3px solid transparent; | |
| } | |
| .menu-item:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-left: 3px solid var(--primary-color); | |
| transform: translateX(5px); | |
| } | |
| .menu-item-icon { | |
| font-size: 20px; | |
| width: 24px; | |
| text-align: center; | |
| color: var(--primary-color); | |
| } | |
| .menu-section-title { | |
| padding: 20px 24px 10px; | |
| color: var(--primary-color); | |
| font-size: 13px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Hero Section */ | |
| .hero-section { | |
| margin-top: 60px; | |
| position: relative; | |
| height: 320px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 20px; | |
| overflow: hidden; | |
| } | |
| .hero-video { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| min-width: 100%; | |
| min-height: 100%; | |
| width: auto; | |
| height: auto; | |
| transform: translate(-50%, -50%); | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| .hero-video iframe { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100vw; | |
| height: 56.25vw; | |
| min-height: 100vh; | |
| min-width: 177.77vh; | |
| transform: translate(-50%, -50%); | |
| border: none; | |
| } | |
| .hero-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); | |
| z-index: 2; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 3; | |
| max-width: 800px; | |
| } | |
| .hero-title { | |
| color: white; | |
| font-size: 24px; | |
| margin-bottom: 12px; | |
| font-weight: 600; | |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .hero-subtitle { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 14px; | |
| margin-bottom: 24px; | |
| line-height: 1.5; | |
| max-width: 320px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .explore-btn { | |
| background: var(--accent-color); | |
| color: white; | |
| padding: 12px 36px; | |
| border-radius: 25px; | |
| border: none; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3); | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .explore-btn:hover { | |
| background: #1976D2; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4); | |
| } | |
| .explore-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 5px; | |
| height: 5px; | |
| background: rgba(255, 255, 255, 0.5); | |
| opacity: 0; | |
| border-radius: 100%; | |
| transform: scale(1, 1) translate(-50%, -50%); | |
| transform-origin: 50% 50%; | |
| } | |
| .explore-btn:focus:not(:active)::after { | |
| animation: ripple 1s ease-out; | |
| } | |
| @keyframes ripple { | |
| 0% { | |
| transform: scale(0, 0); | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: scale(20, 20); | |
| opacity: 0; | |
| } | |
| } | |
| /* Section Styles */ | |
| .section { | |
| padding: 24px 16px; | |
| background: white; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .section-title { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--secondary-color); | |
| position: relative; | |
| padding-bottom: 8px; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 40px; | |
| height: 3px; | |
| background: var(--primary-color); | |
| border-radius: 2px; | |
| } | |
| .view-all { | |
| color: var(--accent-color); | |
| font-size: 14px; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .view-all:hover { | |
| color: #1976D2; | |
| transform: translateX(5px); | |
| } | |
| /* Cards Container */ | |
| .cards-container { | |
| display: flex; | |
| gap: 16px; | |
| overflow-x: auto; | |
| scroll-snap-type: x mandatory; | |
| padding-bottom: 12px; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .cards-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .card { | |
| min-width: 300px; | |
| flex-shrink: 0; | |
| scroll-snap-align: start; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: white; | |
| box-shadow: var(--card-shadow); | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: inherit; | |
| display: block; | |
| transition: var(--transition); | |
| position: relative; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); | |
| border-color: var(--primary-color); | |
| } | |
| .card-image { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| background: #f0f0f0; | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| transition: transform 0.5s ease; | |
| } | |
| .card:hover img { | |
| transform: scale(1.05); | |
| } | |
| .card-content { | |
| padding: 16px; | |
| } | |
| .card-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--secondary-color); | |
| margin-bottom: 6px; | |
| line-height: 1.3; | |
| } | |
| .card-subtitle { | |
| font-size: 13px; | |
| color: #666; | |
| margin-bottom: 8px; | |
| line-height: 1.3; | |
| } | |
| .card-features { | |
| font-size: 12px; | |
| color: #999; | |
| margin-bottom: 12px; | |
| line-height: 1.4; | |
| } | |
| .card-cta { | |
| color: var(--primary-color); | |
| font-size: 13px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: var(--transition); | |
| } | |
| .card-cta:hover { | |
| color: #b8952d; | |
| transform: translateX(5px); | |
| } | |
| /* Spacer */ | |
| .spacer { | |
| height: 12px; | |
| background: var(--light-bg); | |
| } | |
| /* Featured Card */ | |
| .featured-card { | |
| margin: 20px 16px; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| position: relative; | |
| height: 240px; | |
| background-size: cover; | |
| background-position: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 24px; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .featured-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); | |
| z-index: 1; | |
| } | |
| .featured-content { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .featured-title { | |
| color: white; | |
| font-size: 22px; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .featured-subtitle { | |
| color: rgba(255, 255, 255, 0.95); | |
| font-size: 14px; | |
| margin-bottom: 20px; | |
| line-height: 1.5; | |
| max-width: 300px; | |
| } | |
| /* Products Section */ | |
| .products-section { | |
| padding: 24px 16px; | |
| background: white; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 16px; | |
| margin-top: 20px; | |
| } | |
| .product-card { | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: var(--card-shadow); | |
| transition: var(--transition); | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .product-image { | |
| width: 100%; | |
| height: 120px; | |
| background: #f0f0f0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 48px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .product-content { | |
| padding: 16px; | |
| background: white; | |
| } | |
| .product-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--secondary-color); | |
| margin-bottom: 8px; | |
| } | |
| .product-desc { | |
| font-size: 12px; | |
| color: #666; | |
| line-height: 1.4; | |
| margin-bottom: 12px; | |
| } | |
| .product-btn { | |
| width: 100%; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 10px; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-align: center; | |
| text-decoration: none; | |
| display: block; | |
| transition: var(--transition); | |
| } | |
| .product-btn:hover { | |
| background: #b8952d; | |
| transform: translateY(-2px); | |
| } | |
| /* WhatsApp FAB */ | |
| .whatsapp-fab { | |
| position: fixed; | |
| bottom: 24px; | |
| left: 24px; | |
| width: 60px; | |
| height: 60px; | |
| background: #25D366; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); | |
| cursor: pointer; | |
| z-index: 999; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| animation: pulse 2s infinite; | |
| } | |
| .whatsapp-fab:hover { | |
| transform: scale(1.15); | |
| animation: none; | |
| } | |
| .whatsapp-fab i { | |
| font-size: 30px; | |
| color: white; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: var(--secondary-color); | |
| color: #fff; | |
| padding: 48px 20px 24px; | |
| margin-top: 40px; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 32px; | |
| margin-bottom: 32px; | |
| } | |
| .footer-section h3 { | |
| color: var(--primary-color); | |
| font-size: 18px; | |
| margin-bottom: 16px; | |
| font-weight: 600; | |
| position: relative; | |
| padding-bottom: 8px; | |
| } | |
| .footer-section h3::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 30px; | |
| height: 2px; | |
| background: var(--primary-color); | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 12px; | |
| } | |
| .footer-section ul li a { | |
| color: #ccc; | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .footer-section ul li a:hover { | |
| color: var(--primary-color); | |
| transform: translateX(5px); | |
| } | |
| .footer-section p { | |
| color: #ccc; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 16px; | |
| } | |
| .social-link { | |
| width: 44px; | |
| height: 44px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .social-link:hover { | |
| background: var(--primary-color); | |
| border-color: var(--primary-color); | |
| transform: translateY(-5px) scale(1.1); | |
| } | |
| .social-link i { | |
| font-size: 18px; | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 24px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #999; | |
| font-size: 13px; | |
| } | |
| .footer-bottom a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hero-section { | |
| height: 280px; | |
| } | |
| .hero-title { | |
| font-size: 20px; | |
| } | |
| .hero-subtitle { | |
| font-size: 13px; | |
| } | |
| .section-title { | |
| font-size: 16px; | |
| } | |
| .card { | |
| min-width: 280px; | |
| } | |
| .products-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .card { | |
| min-width: 260px; | |
| } | |
| .hero-section { | |
| height: 240px; | |
| } | |
| .hero-title { | |
| font-size: 18px; | |
| } | |
| } | |
| /* Built with anycoder */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| text-decoration: none; | |
| z-index: 1000; | |
| transition: var(--transition); | |
| backdrop-filter: blur(10px); | |
| } | |
| .built-with:hover { | |
| background: rgba(0, 0, 0, 0.9); | |
| transform: scale(1.05); | |
| } | |
| /* Loading Animation */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .section, | |
| .featured-card, | |
| .products-section { | |
| animation: fadeIn 0.6s ease-out; | |
| } | |
| /* Mood Style Enhancements */ | |
| .mood-indicator { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| width: 120px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 25px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| z-index: 1001; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .mood-icon { | |
| font-size: 20px; | |
| color: var(--primary-color); | |
| } | |
| .mood-text { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--secondary-color); | |
| } | |
| .color-palette { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| display: flex; | |
| gap: 8px; | |
| z-index: 1001; | |
| } | |
| .color-option { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: 3px solid white; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| transition: var(--transition); | |
| } | |
| .color-option:hover { | |
| transform: scale(1.1); | |
| } | |
| .color-option.active { | |
| border-color: var(--primary-color); | |
| transform: scale(1.2); | |
| } | |
| .theme-toggle { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60px; | |
| height: 60px; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| z-index: 1001; | |
| backdrop-filter: blur(10px); | |
| transition: var(--transition); | |
| } | |
| .theme-toggle:hover { | |
| transform: translateX(-50%) scale(1.1); | |
| } | |
| .theme-toggle i { | |
| font-size: 24px; | |
| color: var(--secondary-color); | |
| } | |
| .mood-modal { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 320px; | |
| background: white; | |
| border-radius: 20px; | |
| padding: 32px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| z-index: 2000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); | |
| } | |
| .mood-modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .mood-modal h3 { | |
| color: var(--secondary-color); | |
| font-size: 20px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .mood-options { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .mood-option { | |
| aspect-ratio: 1; | |
| border-radius: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: 2px solid transparent; | |
| } | |
| .mood-option:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary-color); | |
| } | |
| .mood-option i { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .mood-option span { | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .mood-actions { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| } | |
| .mood-btn { | |
| padding: 10px 24px; | |
| border-radius: 25px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .mood-btn-primary { | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| } | |
| .mood-btn-secondary { | |
| background: transparent; | |
| color: var(--secondary-color); | |
| border: 1px solid #ddd; | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 1999; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.4s ease; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="menu-overlay" id="menuOverlay" onclick="closeMenu()"></div> | |
| <div class="modal-overlay" id="moodModalOverlay" onclick="closeMoodModal()"></div> | |
| <div class="side-menu" id="sideMenu"> | |
| <div class="menu-header"> | |
| <div class="menu-logo"> | |
| <img src="https://arttouchs.com/wp-content/uploads/2024/07/cropped-Art-Touch-Logo-PNG-2.png" alt="ART TOUCH"> | |
| </div> | |
| <div class="close-menu" onclick="closeMenu()">×</div> | |
| </div> | |
| <div class="menu-items"> | |
| <div class="menu-section-title">Vehicles</div> | |
| <a href="/sprinter" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-shuttle-van"></i></span> | |
| <span>Mercedes-Benz Sprinter</span> | |
| </a> | |
| <a href="/vclass" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-car-side"></i></span> | |
| <span>Mercedes-Benz V-Class</span> | |
| </a> | |
| <a href="/gmc" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-car"></i></span> | |
| <span>GMC Customized VIP</span> | |
| </a> | |
| <div class="menu-section-title">Services</div> | |
| <a href="/wheelchair" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-wheelchair"></i></span> | |
| <span>Wheelchair Customization</span> | |
| </a> | |
| <a href="/upholstery" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-paint-brush"></i></span> | |
| <span>Custom Upholstery</span> | |
| </a> | |
| <a href="/furniture" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-couch"></i></span> | |
| <span>Home Furniture</span> | |
| </a> | |
| <a href="/electronics" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-tv"></i></span> | |
| <span>Smart TV & Electronics</span> | |
| </a> | |
| <div class="menu-section-title">Company</div> | |
| <a href="/about" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-info-circle"></i></span> | |
| <span>About Us</span> | |
| </a> | |
| <a href="/contact" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-phone"></i></span> | |
| <span>Contact Us</span> | |
| </a> | |
| <a href="/showroom" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-map-marker-alt"></i></span> | |
| <span>Our Showroom</span> | |
| </a> | |
| <a href="/gallery" class="menu-item"> | |
| <span class="menu-item-icon"><i class="fas fa-images"></i></span> | |
| <span>Gallery</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="header"> | |
| <div class="menu-icon" onclick="openMenu()"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="logo"> | |
| <img src="https://arttouchs.com/wp-content/uploads/2024/07/cropped-Art-Touch-Logo-PNG-2.png" alt="ART TOUCH"> | |
| </div> | |
| <a href="tel:+971562424247" class="phone-icon"> | |
| <i class="fas fa-phone"></i> | |
| </a> | |
| </div> | |
| <div class="mood-indicator" onclick="openMoodModal()"> | |
| <i class="fas fa-smile mood-icon"></i> | |
| <span class="mood-text">Mood Style</span> | |
| </div> | |
| <div class="color-palette"> | |
| <div class="color-option" style="background: #d4af37;" onclick="changeColorScheme('#d4af37')"></div> | |
| <div class="color-option" style="background: #2196F3;" onclick="changeColorScheme('#2196F3')"></div> | |
| <div class="color-option" style="background: #E91E63;" onclick="changeColorScheme('#E91E63')"></div> | |
| <div class="color-option" style="background: #4CAF50;" onclick="changeColorScheme('#4CAF50')"></div> | |
| </div> | |
| <div class="theme-toggle" onclick="toggleTheme()"> | |
| <i class="fas fa-moon"></i> | |
| </div> | |
| <div class="mood-modal" id="moodModal"> | |
| <h3>Choose Your Mood</h3> | |
| <div class="mood-options"> | |
| <div class="mood-option" onclick="setMood('luxury')"> | |
| <i class="fas fa-crown" style="color: #d4af37;"></i> | |
| <span>Luxury</span> | |
| </div> | |
| <div class="mood-option" onclick="setMood('sport')"> | |
| <i class="fas fa-bolt" style="color: #E91E63;"></i> | |
| <span>Sport</span> | |
| </div> | |
| <div class="mood-option" onclick="setMood('classic')"> | |
| <i class="fas fa-gem" style="color: #2196F3;"></i> | |
| <span>Classic</span> | |
| </div> | |
| <div class="mood-option" onclick="setMood('modern')"> | |
| <i class="fas fa-rocket" style="color: #4CAF50;"></i> | |
| <span>Modern</span> | |
| </div> | |
| <div class="mood-option" onclick="setMood('vintage')"> | |
| <i class="fas fa-wine-glass" style="color: #8D6E63;"></i> | |
| <span>Vintage</span> | |
| </div> | |
| <div class="mood-option" onclick="setMood('futuristic')"> | |
| <i class="fas fa-future" style="color: #9C27B0;"></i> | |
| <span>Futuristic</span> | |
| </div> | |
| </div> | |
| <div class="mood-actions"> | |
| <button class="mood-btn mood-btn-secondary" onclick="closeMoodModal()">Cancel</button> | |
| <button class="mood-btn mood-btn-primary" onclick="applyMood()">Apply</button> | |
| </div> | |
| </div> | |
| <div class="hero-section"> | |
| <div class="hero-video"> | |
| <iframe | |
| src="https://www.youtube.com/embed/8VUijhenyHA?autoplay=1&mute=1&loop=1&playlist=8VUijhenyHA&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1" | |
| allow="autoplay; encrypted-media" allowfullscreen> | |
| </iframe> | |
| </div> | |
| <div class="hero-overlay"></div> | |
| <div class="hero-content"> | |
| <div class="hero-title">Before</div> | |
| <div class="hero-subtitle">Transform your vehicle with ART Touch's premium customization services</div> | |
| <a href="#vehicles" class="explore-btn">Explore Now</a> | |
| </div> | |
| </div> | |
| <div class="section" id="vehicles"> | |
| <div class="section-header"> | |
| <div class="section-title">Discover Mercedes-Benz Sprinter</div> | |
| <a href="/sprinter" class="view-all"> | |
| View All <i class="fas fa-arrow-left"></i> | |
| </a> | |
| </div> | |
| <div class="cards-container"> | |
| <a href="/sprinter-luxury-vip" class="card"> | |
| <img src="https://arttouchs.com/wp-content/uploads/2024/08/Sprinter-VIP-Luxury-van-2024-Mercedes-Long-van-Full-Review-Interior-customized.jpg" alt="Sprinter Luxury VIP"> | |
| <div class="card-content"> | |
| <div class="card-title">Sprinter Luxury vip | Royal Van</div> | |
| <div class="card-subtitle">Bespoke Mercedes Sprinter van</div> | |
| <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div> | |
| <div class="card-cta"> | |
| <i class="fas fa-star"></i> Build Your Own Now ? | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/sprinter-luxury-vip-2" class="card"> | |
| <div class="card-image" | |
| style="background: linear-gradient(135deg, #4A148C, #7B1FA2); display: flex; align-items: center; justify-content: center; font-size: 48px;"> | |
| <i class="fas fa-shuttle-van" style="color: rgba(255,255,255,0.8);"></i> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-title">Sprinter Luxury vip | Royal Van</div> | |
| <div class="card-subtitle">Bespoke Mercedes Sprinter van</div> | |
| <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div> | |
| <div class="card-cta"> | |
| <i class="fas fa-star"></i> Build Your Own Now ? | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/sprinter-luxury-vip-3" class="card"> | |
| <div class="card-image" | |
| style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;"> | |
| <i class="fas fa-shuttle-van" style="color: rgba(255,255,255,0.8);"></i> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-title">Sprinter Luxury vip | Royal Van</div> | |
| <div class="card-subtitle">Bespoke Mercedes Sprinter van</div> | |
| <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div> | |
| <div class="card-cta"> | |
| <i class="fas fa-star"></i> Build Your Own Now ? | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <div class="section-title">Discover Mercedes-Benz V-Class</div> | |
| <a href="/vclass" class="view-all"> | |
| View All <i class="fas fa-arrow-left"></i> | |
| </a> | |
| </div> | |
| <div class="cards-container"> | |
| <a href="/vclass-luxury-vip" class="card"> | |
| <div class="card-image" | |
| style="background: linear-gradient(135deg, #C62828, #E53935); display: flex; align-items: center; justify-content: center; font-size: 48px;"> | |
| <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-title">V-Class Luxury vip interior van</div> | |
| <div class="card-subtitle">Bespoke Mercedes V-class van</div> | |
| <div class="card-features">Custom by<br>ART Touch modifications<br>Features in UAE</div> | |
| <div class="card-cta"> | |
| <i class="fas fa-star"></i> Build Your Own Now ? | |
| </div> | |
| </div> | |
| </a> | |
| <a href="/vclass-luxury-vip-2" class="card"> | |
| <div class="card-image" | |
| style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;"> | |
| <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-title">V-Class Luxury vip interior van</div> | |
| <div class="card-subtitle">Bespoke Mercedes V-class van</div> | |
| <div class="card-features">Custom by<br>ART Touch modifications<br>Features in UAE</div> | |
| <div class="card-cta"> | |
| <i class="fas fa-star"></i> Build Your Own Now ? | |
| </div> | |
| </div> | |
| </a> | |
| < |