Reflective Robotaxi Decal | Tesla Body & Window Waterproof PVC Sticker

/* --- 0. Core Reset and Global Styles --- */ #pdp-wrapper-decal-set { --primary-color: #1a1a1a; --secondary-color: #3f88c5; --background-light: #f4f4f7; --gap-small: 8px; --gap-large: 32px; --radius: 12px; --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); font-family: 'Inter', sans-serif; color: var(--primary-color); background-color: white; padding: 0; margin: 0; width: 100%; overflow-x: hidden; /* Prevent horizontal scroll due to full-width banner */ } /* Base Typography */ #pdp-wrapper-decal-set h2 { font-size: 2.5rem; font-weight: 700; text-align: center; margin-top: var(--gap-large); margin-bottom: var(--gap-large); letter-spacing: -0.05em; } #pdp-wrapper-decal-set h3 { font-size: 1.5rem; font-weight: 600; margin: 0; } #pdp-wrapper-decal-set p { line-height: 1.75; font-size: 1rem; color: #4b5563; } /* Global Transition for Hover/Dynamic effects */ .transition-element { transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Content Container (Standard Padding/Centering) */ .content-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gap-large); } /* --- 1. Overview Gallery --- */ .overview-gallery { display: flex; gap: var(--gap-small); margin: 0 auto; max-width: 1200px; padding: var(--gap-large); } .overview-gallery .placeholder-image-item { flex: 1 1 25%; /* 4 items, 25% width each */ overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-subtle); } .overview-gallery .placeholder-image-item:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-hover); } .overview-gallery .placeholder-image { width: 100%; /* Enforce 9:16 aspect ratio for vertical images */ aspect-ratio: 9 / 16; background-color: var(--background-light); display: flex; align-items: center; justify-content: center; color: #9ca3af; font-weight: 500; text-align: center; padding: 1rem; } .overview-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- 2. Edge-to-Edge Banner --- */ .full-width-banner { width: 100%; margin: 0; padding: 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-bottom: 4rem; /* Add spacing before the next section */ } .full-width-banner .placeholder-image { width: 100%; /* Enforce 829:406 aspect ratio */ aspect-ratio: 829 / 406; background-color: var(--secondary-color); color: white; font-size: 2rem; display: flex; align-items: center; justify-content: center; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); background-image: linear-gradient(135deg, #1a1a1a 0%, var(--secondary-color) 100%); padding: 2rem; } .full-width-banner .placeholder-image:hover { transform: scale(1.005); opacity: 0.95; } /* --- 3. Feature Details (Alternating Layout) --- */ .feature-detail-module { display: flex; align-items: center; gap: 5%; /* Space between text and image */ margin-bottom: 6rem; } /* Feature layout base (60/40) */ .feature-detail-module .text-content { flex: 0 0 40%; } .feature-detail-module .image-content { flex: 0 0 55%; } /* Alternating (Image on Left) - Default is Text on Left */ .feature-detail-module.image-left { flex-direction: row-reverse; } /* Special handling for text alignment (vertical center is achieved by align-items: center on the flex container) */ .feature-detail-module .image-content .placeholder-image { aspect-ratio: 1 / 1; /* Updated to 1000x1000 (1:1) */ width: 100%; border-radius: var(--radius); background-color: var(--background-light); color: #9ca3af; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-subtle); overflow: hidden; padding: 1rem; } .feature-detail-module .image-content img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: var(--radius); } .feature-detail-module .image-content .placeholder-image:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); } /* Feature Text Animation (Subtle Fade-in) */ .feature-detail-module .text-content p { opacity: 0; transform: translateY(10px); animation: featureFadeIn 0.8s ease forwards; /* Staggered animation indices for demonstration */ } .feature-detail-module:nth-child(1) p { animation-delay: 0.1s; } /* New Feature 1 */ .feature-detail-module:nth-child(2) p { animation-delay: 0.2s; } /* New Feature 2 */ .feature-detail-module:nth-child(3) p { animation-delay: 0.4s; } /* New Feature 3 */ @keyframes featureFadeIn { to { opacity: 1; transform: translateY(0); } } /* --- 4. FAQ Accordion --- */ .faq-module { padding: 4rem 0; background-color: var(--background-light); border-top: 1px solid #e5e7eb; } .faq-item { border-bottom: 1px solid #d1d5db; } .faq-question { padding: 1.5rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background-color: transparent; } .faq-question:hover { background-color: #e0e0e0; } .faq-toggle-icon { font-size: 1.5rem; line-height: 1; transition: transform 0.3s ease; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; padding: 0 1rem; background-color: white; } .faq-answer p { padding-bottom: 1.5rem; margin-top: 0.5rem; font-size: 0.95rem; } .faq-item.active .faq-toggle-icon { transform: rotate(45deg); /* Use a + turning to an X (45 deg rotation) */ } .faq-item.active .faq-answer { max-height: 500px; /* Large enough for content */ padding-top: 0; } /* --- 5. Mobile Responsiveness (CRITICAL: max-width: 768px) --- */ @media (max-width: 768px) { #pdp-wrapper-decal-set h2 { font-size: 2rem; margin-top: 2rem; margin-bottom: 1.5rem; } .content-container { padding: 0 1rem; } /* Overview: Allow wrapping or smaller scale, but keeping 4 across is visually impactful */ .overview-gallery { padding: 1rem; gap: 4px; } /* Feature Details: Switch to Vertical Stack (100% width) */ .feature-detail-module { flex-direction: column !important; /* Forces vertical stack for all */ margin-bottom: 3rem; } .feature-detail-module .text-content, .feature-detail-module .image-content { flex: 0 0 100%; /* Full width */ width: 100%; margin-bottom: 1rem; /* Space between blocks */ } /* Image is now always on top in the stack */ .feature-detail-module { flex-direction: column; /* Ensure image is consistently on top */ } .feature-detail-module.image-left .text-content { order: 1; } .feature-detail-module.image-left .image-content { order: -1; } .feature-detail-module .image-content .placeholder-image { aspect-ratio: 1 / 1; /* Square ratio for features on mobile (Updated) */ } .full-width-banner .placeholder-image { font-size: 1.5rem; aspect-ratio: 1 / 1; /* Make banner square on mobile */ text-align: center; } } Reflective Robotaxi Decal Set Tesla Body & Quarter Window Safety Sticker (PVC) Unique Cyberpunk Design This decal set is inspired by the bold aesthetics of the 'Robotaxi' concept and Cyberpunk culture, offering a sleek, eye-catching visual upgrade for your Tesla. Reflective Safety PVC Manufactured from high-quality "reflective PVC", this feature significantly increases your vehicle's visibility in low-light conditions, acting as an essential "nighttime safety warning" for passing traffic. Weather Resilience & Simple Install Engineered specifically for outdoor exposure, the premium vinyl construction is waterproof and sun-resistant. Installation simply follow the 4-step diagram shown to the right for a smooth, bubble-free application. (Note: Professional installation is recommended for the large one.) Frequently Asked Questions Is professional installation required? + For the smaller quarter window pieces, careful DIY installation is usually straightforward following the 5-step process. However, the larger decal (50 cm x 17 cm) requires careful handling and precise alignment. We strongly recommend professional installation for the large body piece to ensure correct positioning and a flawless, bubble-free finish. What are the three layers of the decal? + The decal unit comprises three functional layers: 1) The protective **transfer film** (top), which holds the graphic pieces together during placement; 2) The main **graphic sticker** (middle), which is the reflective PVC vinyl itself; and 3) The **base paper** (bottom), which protects the adhesive until installation. Will the reflective material fade over time? + The decals are manufactured using high-quality, sun-resistant PVC vinyl specifically engineered for outdoor exposure. While extreme, prolonged UV exposure will eventually affect any material, this product is designed for maximum color fastness and reflective integrity over several years of standard use. document.addEventListener('DOMContentLoaded', () => { const wrapper = document.getElementById('pdp-wrapper-decal-set'); const accordion = wrapper.querySelector('#faq-accordion'); if (!accordion) return; accordion.addEventListener('click', (event) => { let question = event.target.closest('.faq-question'); if (!question) return; const targetId = question.getAttribute('data-toggle'); const answerId = 'a' + targetId.substring(1); const answer = wrapper.querySelector(`#${answerId}`); const item = question.closest('.faq-item'); // If clicking an already active item, close it if (item.classList.contains('active')) { item.classList.remove('active'); } else { // Close all other active items wrapper.querySelectorAll('.faq-item.active').forEach(activeItem => { if (activeItem !== item) { activeItem.classList.remove('active'); } }); // Open the clicked item item.classList.add('active'); } }); });