* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; overflow-x: hidden; } .hero-section { height: 100vh; background: url('https://assets.ycodeapp.com/assets/app112490/Images/gemini_generated_image_dfji9adfji9adfji-hslpirlnej.webp') center center/cover no-repeat, linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; } .paint-bay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(52,73,94,0.1) 0%, rgba(44,62,80,0.2) 70%, rgba(26,37,47,0.3) 100%); z-index: 1; } .paint-bay::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 40px; background: linear-gradient(to bottom, rgba(127,140,141,0.8), rgba(149,165,166,0.8)); border-radius: 0 0 10px 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 2; } .paint-bay::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background-image: linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.3; z-index: 1; } .paint-gun { position: absolute; left: -150px; top: 75%; transform: translateY(-50%) rotate(-5deg); animation: paintGunJourney 4s ease-in-out 0.5s forwards; z-index: 3; width: 168px; height: auto; } .paint-gun img { width: 100%; height: auto; max-width: 168px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4)); display: block; } .paint-cloud { position: absolute; left: calc(33.33% + 20px); top: 75%; transform: translateY(-50%); animation: paintCloudJourney 1.5s ease-in-out 3.5s forwards; z-index: 4; opacity: 0; width: 540px; height: auto; } .paint-cloud img { width: 100%; height: auto; max-width: 540px; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.3)); animation: cloudPulse 0.5s ease-in-out infinite alternate; } .car { position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); z-index: 2; opacity: 1; animation: fadeOutCar 0.3s ease-out 4.8s forwards; } .car img { width: 2851.875px; height: auto; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4)); display: block; } .car-red { position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; animation: fadeInRedCar 0.3s ease-out 4.8s forwards; } .car-red img { width: 2851.875px; height: auto; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4)); display: block; } .hero-text { text-align: center; color: #FBFCFC; z-index: 5; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); opacity: 0; animation: fadeInText 1s ease-out 5.5s forwards; } .hero-text h1 { font-size: 3.5rem; font-weight: bold; margin-bottom: 1rem; color: #e74c3c; text-shadow: 2px 2px 0px #000000, -2px 2px 0px #000000, 2px -2px 0px #000000, -2px -2px 0px #000000, 0px 4px 8px #323337; } .hero-text .subtitle { font-size: 1.2rem; color: #0F8FC3; font-weight: 600; margin-bottom: 0.5rem; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 0px 2px 4px #323337; } .hero-text .phone { font-size: 1.8rem; font-weight: bold; margin-top: 0.5rem; letter-spacing: 2px; } .hero-text .phone .letter { text-shadow: 2px 2px 0px #000000, -2px 2px 0px #000000, 2px -2px 0px #000000, -2px -2px 0px #000000, 0px 3px 6px #323337; } .paint-spray { position: absolute; left: -50px; top: 75%; transform: translateY(-50%); z-index: 2; opacity: 0; animation: sprayEffect 1s ease-out 2s forwards; } .spray-particle { position: absolute; width: 4px; height: 4px; background: #e74c3c; border-radius: 50%; animation: sprayParticle 1s ease-out infinite; } .spray-particle:nth-child(1) { left: 0px; top: -10px; animation-delay: 0s; } .spray-particle:nth-child(2) { left: 8px; top: 5px; animation-delay: 0.1s; } .spray-particle:nth-child(3) { left: -5px; top: 10px; animation-delay: 0.2s; } .spray-particle:nth-child(4) { left: 12px; top: -5px; animation-delay: 0.3s; } .spray-particle:nth-child(5) { left: 3px; top: 15px; animation-delay: 0.4s; } @keyframes paintGunJourney { 0% { left: -150px; opacity: 1; } 40% { left: calc(33.33% - 168px); opacity: 1; } 60% { left: calc(33.33% - 168px); opacity: 1; } 80% { left: calc(33.33% - 168px); opacity: 0.8; } 100% { left: calc(33.33% - 168px); opacity: 0; } } @keyframes paintCloudJourney { 0% { opacity: 0; transform: translateY(-50%) scale(0.5); } 20% { opacity: 0.9; transform: translateY(-50%) scale(1); } 80% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1.2); } } @keyframes cloudPulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 0.7; } } @keyframes fadeInText { to { opacity: 1; } } @keyframes fadeOutCar { to { opacity: 0; } } @keyframes fadeInRedCar { to { opacity: 1; } } @keyframes sprayEffect { 0% { opacity: 0; left: 40%; } 50% { opacity: 1; left: 50%; } 100% { opacity: 0; left: 60%; } } @keyframes sprayParticle { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5) translateX(20px); } } @media (max-width: 768px) { .hero-text h1 { font-size: 2.5rem; } .hero-text .phone { font-size: 1.4rem; } .hero-text { top: 15%; } .car img, .car-red img { width: 2129.4px; } .paint-gun { transform: translateY(-50%); width: 134.4px; } .paint-cloud { transform: translateY(-50%) scale(0.8); width: 432px; } .car, .car-red { left: 50%; } }

BOB'S PAINTLAND

62 Years of Excellence • Locally Owned & Operated

(360) 573-7133