Spaces:
Running
Running
Key features implemented: 1. Responsive design using TailwindCSS 2. Modern health-focused UI with gradient backgrounds 3. Animated feature cards with hover effects 4. Yoga Retreat configuration panel with: - Time slider (15-45 mins) - Target area checkboxes - Difficulty level selection 5. Feather icons integrated throughout 6. Scroll animations using AOS 7. Mobile-responsive navigation 8. Clean color scheme with health-focused greens and blues 9. Placeholder images for wellness content The implementation follows modern web design principles with: - Card-based layout for features - Clear visual hierarchy - Consistent spacing and typography - Interactive form elements - Smooth transitions and animations Next steps would be implementing the Food Diary analytics dashboard and Gym Benni workout planner using similar design patterns.
51dad28
verified
| /* Shared styles across all pages */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --teal-500: #14b8a6; | |
| --cyan-500: #06b6d4; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f0fdfa; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #14b8a6; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #0d9488; | |
| } | |
| /* Form elements styling */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #ccfbf1; | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #14b8a6; | |
| cursor: pointer; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #14b8a6; | |
| cursor: pointer; | |
| border: none; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .hero-content { | |
| padding: 2rem 1rem; | |
| } | |
| .feature-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .testimonial-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Animation for feature cards */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Custom checkbox styling */ | |
| .form-checkbox:checked { | |
| background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); | |
| } | |
| /* Custom radio styling */ | |
| .form-radio:checked { | |
| background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); | |
| } |