/* Custom MenstroCare styles extracted from index.html */ .floating-petals { position: absolute; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .petal { position: absolute; width: 10px; height: 10px; background: radial-gradient(circle, #E6E0F8, #FADADD); border-radius: 50% 0 50% 0; animation: float 15s infinite linear; opacity: 0.6; } @keyframes float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } .fade-in { /* Visible by default so content shows even if JS fails */ opacity: 1; transform: none; transition: all 0.8s ease-out; } /* When JS is active, we add a class to to enable fade-in effect */ .js .fade-in { opacity: 0; transform: translateY(30px); } .js .fade-in.visible { opacity: 1; transform: translateY(0); } .bounce-icon { transition: transform 0.3s ease; } .bounce-icon:hover { transform: scale(1.1) translateY(-5px); } .glow-card { transition: all 0.3s ease; } .glow-card:hover { box-shadow: 0 20px 40px rgba(179, 157, 219, 0.3); transform: translateY(-5px); } .gradient-bg { background: linear-gradient(135deg, #E6E0F8 0%, #FADADD 25%, #D4F4EC 50%, #FFE4D6 75%, #B39DDB 100%); } .heartbeat { animation: heartbeat 2s infinite; } html, body { margin: 0; padding: 0; overflow-x: hidden; } footer { margin-bottom: 0 !important; padding-bottom: 0 !important; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .confetti { position: relative; overflow: hidden; } .confetti::before { content: '✨'; position: absolute; animation: confetti-fall 3s infinite; font-size: 20px; } @keyframes confetti-fall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100px) rotate(360deg); opacity: 0; } } .mobile-menu { position: fixed; top: 4rem; left: 0; width: 100%; height: calc(100vh - 4rem); background: white; z-index: 50; overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease-in-out; will-change: transform; pointer-events: none; /* do not block taps when closed */ } .mobile-menu.open { transform: translateX(0); pointer-events: auto; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1); } .chatbot { position: fixed; bottom: 20px; right: 20px; z-index: 1000; background: linear-gradient(135deg, #B39DDB, #E6E0F8); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(179, 157, 219, 0.4); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .newsletter-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 2000; } .newsletter-popup.show { display: flex; } /* Mobile-friendly tweaks (non-intrusive) */ html, body { -webkit-text-size-adjust: 100%; } /* Prevent unexpected horizontal scroll on small devices */ body { overflow-x: hidden; } /* Extra small phones */ @media (max-width: 360px) { /* Keep hero circle and emoji from overflowing */ .w-80.h-80 { width: 16rem !important; height: 16rem !important; } .text-8xl { font-size: 3.75rem !important; line-height: 1.1; } /* Safer defaults for large emojis/icons in cards */ .bounce-icon { font-size: 2.5rem; } /* Slightly tighter overall horizontal padding */ .max-w-7xl { padding-left: 1rem; padding-right: 1rem; } /* Ensure images never overflow their containers */ img { max-width: 100%; height: auto; } /* Improve tap targets in mobile menu */ #mobile-menu a { padding-top: 0.75rem; padding-bottom: 0.75rem; } } /* Small phones and down */ @media (max-width: 480px) { /* Make CTA buttons wrap nicely without overflow */ .cta-stack, .cta-buttons { gap: 0.5rem; } .cta-buttons > * { flex: 1 1 auto; } } /* ------------------------- Cycle-Synced Yoga visuals ------------------------- */ .yoga-visual { max-width: 120px; width: 100%; height: auto; display: block; } .yoga-breath { fill: rgba(179, 157, 219, 0.18); /* softpurple with transparency */ transform-box: fill-box; transform-origin: center; animation: breathe 4s ease-in-out infinite; } .yoga-body { fill: #B39DDB; opacity: 0.9; } .yoga-limbs { stroke: #B39DDB; stroke-width: 2.5; fill: none; stroke-linecap: round; animation: flow 6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(0.85); opacity: 0.65; } 50% { transform: scale(1); opacity: 0.95; } } @keyframes flow { 0%, 100% { stroke-width: 2.5; } 50% { stroke-width: 3; } } .phase-pill { background: rgba(179, 157, 219, 0.15); color: #5B3FA6; /* deep soft purple for text */ border: 1px solid rgba(179, 157, 219, 0.6); padding: 0.25rem 0.6rem; border-radius: 9999px; font-weight: 600; } /* Mobile Menu Toggle Button */ #mobile-menu-toggle { position: absolute; opacity: 0; width: 0; height: 0; } .mobile-menu-btn { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 100; } .mobile-menu-btn span { width: 100%; height: 2px; background-color: #4B0082; border-radius: 10px; transition: all 0.3s ease-in-out; position: relative; transform-origin: center; } /* Animate hamburger to X */ #mobile-menu-toggle:checked + .mobile-menu-btn span:nth-child(1) { transform: translateY(11px) rotate(45deg); } #mobile-menu-toggle:checked + .mobile-menu-btn span:nth-child(2) { opacity: 0; transform: translateX(20px); } #mobile-menu-toggle:checked + .mobile-menu-btn span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } /* Mobile Menu Toggle */ #mobile-menu-toggle { display: none; } /* Mobile Menu Button */ .mobile-menu-btn { display: flex !important; flex-direction: column !important; justify-content: space-around !important; align-items: center !important; width: 30px !important; height: 30px !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 6px !important; z-index: 1000 !important; position: relative !important; opacity: 1 !important; visibility: visible !important; } .mobile-menu-btn span { display: block !important; width: 6px !important; height: 6px !important; background: #4B0082 !important; border-radius: 50% !important; transition: all 0.3s ease !important; opacity: 1 !important; visibility: visible !important; } /* Mobile Menu */ .mobile-menu { position: relative; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 999; padding: 5rem 1.5rem 2rem; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; display: none; pointer-events: none; } .mobile-menu.open { transform: translateX(0); pointer-events: auto; } /* Menu Items */ .mobile-menu a, .mobile-menu button { display: block; width: 100%; padding: 12px 16px; margin: 8px 0; color: #4B0082; font-size: 1.1rem; font-weight: 500; text-align: left; text-decoration: none; background: none; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .mobile-menu a:hover, .mobile-menu button:not([aria-label="Close menu"]):hover { background: #f3e8ff; } /* Close Button */ .mobile-menu > div > button[aria-label="Close menu"] { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f3e8ff; border: none; border-radius: 50%; cursor: pointer; padding: 0; z-index: 1001; } /* Dots to X Animation */ #mobile-menu-toggle:checked + .mobile-menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); width: 18px; height: 2px; border-radius: 1px; } #mobile-menu-toggle:checked + .mobile-menu-btn span:nth-child(2) { opacity: 0; transform: scale(0); } #mobile-menu-toggle:checked + .mobile-menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); width: 18px; height: 2px; border-radius: 1px; } /* Force hamburger visibility on mobile */ @media (max-width: 768px) { .mobile-menu-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; } .mobile-menu-btn span { display: block !important; width: 6px !important; height: 6px !important; background: #4B0082 !important; border-radius: 50% !important; opacity: 1 !important; visibility: visible !important; } .mobile-menu { display: block; } /* Prevent scrolling when menu is open */ body.menu-open { overflow: hidden; } } /* Menu items */ .mobile-menu a { display: block; padding: 12px 16px; color: #4B0082; font-size: 1.1rem; font-weight: 500; text-decoration: none; transition: background 0.2s; border-radius: 6px; margin: 4px 0; } .mobile-menu a:hover { background: #f3e8ff; } /* Close button */ .mobile-menu > div > button[aria-label="Close menu"] { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4B0082; padding: 0.5rem; z-index: 1002; } /* Menu Items */ /* Menu items */ .mobile-menu a { display: block; padding: 0.75rem 1rem; color: #4B0082; font-size: 1.125rem; font-weight: 500; transition: all 0.2s ease; border-radius: 0.375rem; margin: 0.25rem 0; } .mobile-menu a:hover { background-color: rgba(123, 31, 162, 0.1); color: #6B46C1; } /* Close button */ .mobile-menu > div > button[aria-label="Close menu"] { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; transition: all 0.2s ease; } .mobile-menu > div > button[aria-label="Close menu"]:hover { background-color: rgba(0, 0, 0, 0.05); } /* Hover effect */ .mobile-menu-btn:hover span { background-color: #6B46C1; } /* Animation classes */ .mobile-menu.opening { opacity: 0; } .mobile-menu.closing { opacity: 1; }