/* Animation for the staggered feature cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeInUp { animation: fadeInUp 0.6s forwards; opacity: 0; /* Hide initially */ } /* Base styles for Light Mode */ body { background-color: #ffffff; /* White Background */ color: #1f2937; /* Dark Text */ transition: background-color 0.3s, color 0.3s; /* Smooth transition */ overflow-x: hidden; } /* Dark Mode overrides applied when the 'dark' class is present on */ .dark body { background-color: #111827; /* Dark Background */ color: #e0f2f1; /* Light Text */ } .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.3s; } .stagger-3 { animation-delay: 0.5s; } .stagger-4 { animation-delay: 0.7s; } .stagger-5 { animation-delay: 0.9s; } .stagger-6 { animation-delay: 1.1s; } /* Custom glow for the button */ .cta-button { transition: all 0.3s ease; box-shadow: 0 0 10px rgba(107, 39, 196, 0.5); } .cta-button:hover { box-shadow: 0 0 20px rgba(107, 39, 196, 0.8), 0 0 40px rgba(107, 39, 196, 0.3); transform: translateY(-2px); } /* SVG Icon styles */ .icon { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .header-text { text-align: center; /* display: flex; justify-content: center; flex-direction: column; */ margin-bottom: 40px; } .header-text h1 { /* font-size: 3.5em; */ color: #6c32e9; /* Purple from the design */ color: #000000; /* Purple from the design */ /* font-weight: 700; */ margin-bottom: 10px; } /* Phone Mockup Container */ .phone-mockup { width: 380px; /* Width of the phone casing */ height: 780px; /* Height of the phone casing */ background-color: #6c32e9; /* Purple phone casing */ border-radius: 40px; /* Rounded corners for the phone */ padding: 10px; /* Space between casing and screen */ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), /* Larger shadow for depth */ 0 0 0 8px rgba(255, 255, 255, 0.1); /* Subtle white border */ position: relative; overflow: hidden; /* Hide anything that goes outside the screen borders */ opacity: 0; transform: translateY(50px) scale(0.9); animation: phoneEntrance 1s ease-out forwards, phoneFloat 3s ease-in-out infinite 1s, phoneGlow 4s ease-in-out infinite 1.5s; transition: transform 0.3s ease; } /* Phone entrance animation */ @keyframes phoneEntrance { 0% { opacity: 0; transform: translateY(50px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Floating animation for the phone */ @keyframes phoneFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } } /* Glow pulse animation */ @keyframes phoneGlow { 0%, 100% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 30px rgba(108, 50, 233, 0.4); } 50% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 50px rgba(108, 50, 233, 0.7); } } /* Add a subtle 3D perspective on hover */ .phone-mockup:hover { transform: translateY(-5px) scale(1.02) rotateY(2deg) !important; } .centering-container { display: flex; flex-direction: column; /* Stack the header and phone vertically */ align-items: center; /* Center horizontally */ padding: 20px 0; /* Add some vertical space */ perspective: 1000px; } /* Phone Screen */ .phone-screen { width: 100%; height: 100%; background-color: #fff; /* White screen background */ border-radius: 30px; /* Slightly smaller border-radius for inner screen */ overflow: hidden; /* Crucial for scrolling content */ display: flex; flex-direction: column; padding: 0 20px 20px 20px; /* Padding for content inside the screen */ animation: screenFadeIn 0.8s ease-out 0.3s forwards; opacity: 0; } @keyframes screenFadeIn { to { opacity: 1; } } /* Notch (simplified) */ .notch { width: 120px; height: 25px; background-color: #000; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10; animation: notchSlide 0.6s ease-out 0.5s forwards; opacity: 0; } @keyframes notchSlide { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Status Bar (simplified) */ .status-bar { height: 35px; /* Space for time, battery, etc. */ display: flex; justify-content: flex-end; /* Align elements to the right, or space-between */ align-items: center; padding: 0 10px; color: #333; /* Dark color for status icons */ font-size: 0.8em; margin-top: 10px; /* Push down from the very top */ animation: fadeInUp 0.5s ease-out 0.7s forwards; opacity: 0; } /* App Header */ .app-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; margin-top: 10px; animation: fadeInUp 0.5s ease-out forwards; opacity: 0; } .app-content.show .app-header { animation-delay: 0.1s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .app-title { font-size: 1.8em; font-weight: 700; color: #333; } .settings-icon { font-size: 1.5em; color: #888; cursor: pointer; } /* Section Title (e.g., Upcoming Renewals) */ .section-title { font-size: 1.4em; font-weight: 600; color: #333; margin-bottom: 15px; margin-top: 25px; animation: fadeInUp 0.5s ease-out forwards; opacity: 0; } .app-content.show .section-title { animation-delay: 0.2s; } .section-title-wrapper { display: flex; justify-content: space-between; align-items: baseline; margin-top: 25px; margin-bottom: 15px; animation: fadeInUp 0.5s ease-out forwards; opacity: 0; } .app-content.show .section-title-wrapper { animation-delay: 0.6s; } .section-title-wrapper .section-title { margin-bottom: 0; /* Override default margin */ margin-top: 0; /* Override default margin */ } .view-all { color: #6c32e9; /* Purple accent for "View All" */ font-size: 0.95em; text-decoration: none; font-weight: 500; } /* Upcoming Renewals Section (Horizontal Scroll) */ .upcoming-renewals-scroll { display: flex; overflow-x: scroll; /* Enable horizontal scrolling */ gap: 15px; /* Space between cards */ padding-bottom: 15px; /* Space for scrollbar */ -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */ margin-left: -20px; /* Offset to align with screen edge */ margin-right: -20px; /* Offset to align with screen edge */ padding-left: 20px; /* Bring content back in */ padding-right: 20px; /* Add padding to the right for last item visibility */ } .upcoming-renewals-scroll::-webkit-scrollbar { height: 5px; /* Height of horizontal scrollbar */ } .upcoming-renewals-scroll::-webkit-scrollbar-track { background: #f1f1f1; /* Light track */ border-radius: 10px; } .upcoming-renewals-scroll::-webkit-scrollbar-thumb { background: #ccc; /* Grey thumb */ border-radius: 10px; } .upcoming-renewals-scroll::-webkit-scrollbar-thumb:hover { background: #aaa; } .renewal-card { min-width: 150px; /* Minimum width for the card */ height: 150px; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; /* Prevent cards from shrinking */ color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); position: relative; /* For image positioning */ animation: cardSlideIn 0.6s ease-out forwards; opacity: 0; transform: translateX(-20px); } .app-content.show .renewal-card:nth-child(1) { animation-delay: 0.3s; } .app-content.show .renewal-card:nth-child(2) { animation-delay: 0.4s; } @keyframes cardSlideIn { to { opacity: 1; transform: translateX(0); } } .renewal-card.red { background-color: #e50914; } /* Netflix red */ .renewal-card.black { background-color: #000; } /* Apple Music black */ .renewal-card img { height: 30px; /* Smaller logo size */ width: auto; /* filter: brightness(0) invert(1); */ /* Make images white */ position: absolute; top: 20px; left: 20px; } .renewal-card .details { margin-top: auto; /* Push details to the bottom */ } .renewal-card .service-name { font-size: 1.1em; font-weight: 600; display: block; } .renewal-card .price { font-size: 0.9em; font-weight: 400; display: block; opacity: 0.8; } .renewal-card .date { font-size: 0.8em; font-weight: 500; display: block; margin-top: 5px; } /* Subscription List Section */ .subscription-list { display: flex; flex-direction: column; gap: 12px; /* Space between list items */ overflow-y: auto; /* Enable vertical scrolling */ flex-grow: 1; /* Allow list to take available space and scroll */ padding-bottom: 20px; /* Space at the bottom for scroll */ margin-left: -20px; /* Offset to align with screen edge */ margin-right: -20px; /* Offset to align with screen edge */ padding-left: 20px; /* Bring content back in */ padding-right: 20px; /* Add padding to the right for scrollbar */ } .subscription-list::-webkit-scrollbar { width: 5px; } .subscription-list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .subscription-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } .subscription-list::-webkit-scrollbar-thumb:hover { background: #aaa; } .subscription-item { display: flex; align-items: center; justify-content: space-between; min-height: 70px; /* Ensure consistent height */ border-radius: 15px; padding: 15px 20px; color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); animation: itemFadeIn 0.5s ease-out forwards; opacity: 0; transform: translateY(10px); } .app-content.show .subscription-item:nth-child(1) { animation-delay: 0.7s; } .app-content.show .subscription-item:nth-child(2) { animation-delay: 0.8s; } .app-content.show .subscription-item:nth-child(3) { animation-delay: 0.9s; } .app-content.show .subscription-item:nth-child(4) { animation-delay: 1s; } @keyframes itemFadeIn { to { opacity: 1; transform: translateY(0); } } .subscription-item.red { background-color: #e50914; } .subscription-item.black { background-color: #000; } .subscription-item.green { background-color: #1db954; } /* Spotify green */ .subscription-item.dark-gray { background-color: #232f3e; } /* Amazon Prime dark blue/gray */ .subscription-item img { height: 40px; width: auto; margin-right: 15px; /* filter: brightness(0) invert(1); Make images white */ } .subscription-item .details { flex-grow: 1; /* Allows details to take up most space */ display: flex; flex-direction: column; justify-content: center; } .subscription-item .service-name { font-size: 1.1em; font-weight: 600; } .subscription-item .category { font-size: 0.8em; opacity: 0.8; } .subscription-item .price { font-size: 1em; font-weight: 600; text-align: right; line-height: 1.2; } .container { position: relative; width: 900px; height: 600px; } /* Responsive adjustments for phone mockup */ @media (max-width: 768px) { .phone-mockup { width: 300px; height: 620px; } .phone-mockup:hover { transform: translateY(-3px) scale(1.01) !important; } /* Reduce renewal card size for mobile */ .renewal-card { min-width: 110px; height: 110px; padding: 12px; border-radius: 15px; } .renewal-card img { height: 22px; top: 12px; left: 12px; } .renewal-card .service-name { font-size: 0.9em; } .renewal-card .price { font-size: 0.75em; } .renewal-card .date { font-size: 0.7em; margin-top: 3px; } /* Reduce subscription item size for mobile */ .subscription-item { min-height: 55px; padding: 10px 15px; border-radius: 12px; } .subscription-item img { height: 30px; margin-right: 10px; } .subscription-item .service-name { font-size: 0.95em; } .subscription-item .category { font-size: 0.7em; } .subscription-item .price { font-size: 0.85em; } /* Reduce section title size */ .section-title { font-size: 1.2em; margin-top: 20px; margin-bottom: 12px; } /* Reduce gap between items */ .subscription-list { gap: 8px; } .upcoming-renewals-scroll { gap: 10px; } /* Reduce phone screen padding for more space */ .phone-screen { padding: 0 15px 15px 15px; } .section-title-wrapper { margin-top: 20px; margin-bottom: 12px; } .app-header { padding: 12px 0; margin-top: 8px; } /* Reduce status bar height */ .status-bar { height: 28px; margin-top: 8px; } } @media (max-width: 480px) { .phone-mockup { width: 260px; height: 540px; } /* Further reduce sizes for smaller mobile */ .renewal-card { min-width: 100px; height: 100px; padding: 10px; border-radius: 12px; } .renewal-card img { height: 20px; top: 10px; left: 10px; } .renewal-card .service-name { font-size: 0.85em; } .renewal-card .price { font-size: 0.7em; } .renewal-card .date { font-size: 0.65em; } .subscription-item { min-height: 50px; padding: 8px 12px; } .subscription-item img { height: 28px; margin-right: 8px; } .subscription-item .service-name { font-size: 0.9em; } .subscription-item .category { font-size: 0.65em; } .subscription-item .price { font-size: 0.8em; } .section-title { font-size: 1.1em; margin-top: 18px; margin-bottom: 10px; } .subscription-list { gap: 6px; } .upcoming-renewals-scroll { gap: 8px; } /* Reduce app header size */ .app-title { font-size: 1.5em; } .settings-icon { font-size: 1.3em; } /* Further reduce phone screen padding */ .phone-screen { padding: 0 12px 12px 12px; } .section-title-wrapper { margin-top: 18px; margin-bottom: 10px; } .app-header { padding: 10px 0; margin-top: 6px; } /* Adjust margins for better spacing */ .upcoming-renewals-scroll { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } .subscription-list { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } /* Further reduce status bar */ .status-bar { height: 25px; margin-top: 6px; } } /* Skeleton Loading Styles */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 8px; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-header { height: 24px; width: 80px; margin-bottom: 10px; } .skeleton-icon { width: 40px; height: 40px; border-radius: 50%; } .skeleton-text { height: 16px; border-radius: 4px; margin-bottom: 8px; } .skeleton-text.short { width: 60%; } .skeleton-text.medium { width: 80%; } .skeleton-text.long { width: 100%; } .skeleton-card { min-width: 150px; height: 150px; border-radius: 20px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } .skeleton-item { min-height: 70px; border-radius: 15px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; display: flex; align-items: center; padding: 15px 20px; gap: 15px; } .skeleton-content { display: none; opacity: 1; } .skeleton-content.show { display: block; opacity: 1; } .skeleton-content.hide { display: none; opacity: 0; } .app-content { display: none; opacity: 0; } .app-content.show { display: block; opacity: 1; } .app-content.hide { display: none; opacity: 0; } /* Ensure smooth transitions */ .skeleton-content, .app-content { transition: opacity 0.5s ease-in-out; } @keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin-slow-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } @keyframes fade-in { 0% { opacity:0; transform: scale(0.95); } 100% { opacity:1; transform: scale(1); } } @keyframes fade-in-slow { 0% { opacity:0; transform: translateY(20px); } 100% { opacity:1; transform: translateY(0); } } @keyframes slide-up { 0% { opacity:0; transform: translateY(40px); } 100% { opacity:1; transform: translateY(0); } } .animate-spin-slow { animation: spin-slow 18s linear infinite; } .animate-spin-slow-reverse { animation: spin-slow-reverse 22s linear infinite; } .animate-fade-in { animation: fade-in 1.2s ease-in-out; } .animate-slide-up { animation: slide-up 1.4s ease; } .animate-fade-in-slow { animation: fade-in-slow 1.7s ease; }