Spaces:
Running
Running
Design a single-page, scrolling website for a sizzle reel production service. The entire site must be built around this core message: 'Turn your script from a document into an experience. I create compelling sizzle reels and proof-of-concept trailers that grab a producer's attention in 60 seconds and make them feel your story, so you can close the deal.'
0a1d0f6
verified
| /* Inter Font */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); | |
| /* Base Styles */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| /* Helper Classes */ | |
| .section-padding { | |
| padding-top: 5rem; | |
| padding-bottom: 5rem; | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4f46e5; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #4338ca; | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| .hero-content { | |
| padding-top: 4rem; | |
| padding-bottom: 6rem; | |
| } | |
| .showcase-item { | |
| margin-bottom: 3rem; | |
| } | |
| } |