/* ============================================ GLASSMORPHISM CONTAINER STYLES Exact implementation from Figma design Applied to: Volunteering Cards & Contact Button ============================================ */ /* Override previous volunteering section styles */ .volunteering-section .section-list { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 30px; } /* Glassmorphism Container for Volunteering Items */ .volunteering-section .section-list li { box-sizing: border-box; position: relative; width: 100%; max-width: 600px; height: auto; min-height: 120px; margin: 0 auto; padding: 25px 35px !important; /* Base container - Layer 1 */ background: rgba(255, 255, 255, 0.01) !important; border-radius: 60px !important; /* Text styling - DARK FOR BETTER ACCESSIBILITY */ font-size: 1.1em !important; line-height: 1.6 !important; color: rgba(44, 40, 37, 0.95) !important; text-align: center !important; font-weight: 500 !important; /* Z-index for text */ z-index: 1; } /* Layer 2 - First rounded background */ .volunteering-section .section-list li::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(217, 217, 217, 0.5); border-radius: 60px; z-index: -5; } /* Layer 3 - Main glassmorphism layer */ .volunteering-section .section-list li::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(84, 84, 84, 0.1); backdrop-filter: blur(45px); -webkit-backdrop-filter: blur(45px); border-radius: 60px; z-index: -4; box-shadow: /* Inner glow simulation */ inset 5px 6px 10px rgba(217, 217, 217, 0.3), /* Ellipse overlay simulation */ 0 0 40px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); filter: blur(0.5px); } /* ============================================ CONTACT BUTTON - Glassmorphism Style ============================================ */ .contact-button { /* Layout */ box-sizing: border-box !important; position: relative; display: inline-block !important; width: auto !important; max-width: 400px; min-width: 258px; height: auto !important; margin: 30px auto 0 auto !important; padding: 20px 45px !important; /* Flat, transparent design */ background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; /* Minimal border */ border: 1.5px solid rgba(255, 255, 255, 0.15) !important; border-radius: 30px !important; /* Subtle flat shadow */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; /* No 3D transforms - keep it flat */ transform: none !important; /* Text styling */ font-size: 1em !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(220, 227, 232, 0.9) !important; text-align: center; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Smooth transitions */ transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Softer easing curve */ cursor: pointer; overflow: hidden !important; /* Changed to hidden for ripple effect */ /* Remove pseudo-elements */ z-index: 1; } /* Water Ripple Effect on Click */ .contact-button .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple-animation 0.8s ease-out; pointer-events: none; } @keyframes ripple-animation { 0% { transform: scale(0); opacity: 1; } 50% { opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } } /* Remove the glassmorphism layers */ .contact-button::before, .contact-button::after { display: none !important; } /* Hover State - very subtle, gentle */ .contact-button:hover { background: rgba(255, 255, 255, 0.05) !important; /* Less dramatic change */ border-color: rgba(255, 255, 255, 0.22) !important; /* Softer border change */ color: rgba(220, 227, 232, 0.95) !important; /* Subtle text brightening */ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), /* Softer shadow */ inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transform: translateY(-0.5px) !important; /* Very subtle lift */ } /* Active/Press State - gentle press */ .contact-button:active { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.18) !important; /* Softer border */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), /* Very subtle shadow */ inset 0 1px 1px rgba(0, 0, 0, 0.08) !important; transform: translateY(0px) !important; transition: all 0.15s ease-out !important; /* Quick but smooth press */ } /* ============================================ MOBILE RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { .volunteering-section .section-list li { max-width: 90%; min-height: 100px; padding: 20px 30px !important; font-size: 1em !important; border-radius: 50px !important; } .volunteering-section .section-list li::before, .volunteering-section .section-list li::after { border-radius: 50px; } .contact-button { max-width: 90%; min-width: 220px; padding: 18px 40px !important; font-size: 0.95em !important; border-radius: 28px !important; } } @media (max-width: 480px) { .volunteering-section .section-list li { max-width: 95%; min-height: 90px; padding: 18px 25px !important; font-size: 0.95em !important; border-radius: 45px !important; } .volunteering-section .section-list li::before, .volunteering-section .section-list li::after { border-radius: 45px; } .contact-button { max-width: 95%; min-width: 200px; padding: 16px 35px !important; font-size: 0.9em !important; border-radius: 26px !important; } } /* ============================================ DESKTOP SPECIFIC STYLES ============================================ */ @media (min-width: 769px) { .volunteering-section .section-list li { min-height: 120px; padding: 28px 40px !important; font-size: 1.2em !important; } .contact-button { min-width: 280px; padding: 20px 50px !important; font-size: 1.05em !important; } }