/* Keyframe animation for the alert pulse - Cream Theme */ @keyframes pulse-subtle { 0% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(212, 165, 116, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0); } } /* Main Container & Typography */ .collector-component { font-family: 'Poppins', sans-serif; color: #5d4037; line-height: 1.5; width: 100%; padding: 5px; } /* Base Collector Card Styles - Cream Theme */ .collector-card { background: #ffffff; color: #5d4037; border-radius: 8px; padding: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(212, 165, 116, 0.15); margin-bottom: 25px; border: 2px solid #d4a574; transition: all 0.3s ease-in-out; position: relative; overflow: hidden; } .collector-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(212, 165, 116, 0.25); border-color: #b08d57; } /* Specific styles for the ALERT box - Cream Theme */ .collector-card.alert-box { background: #ffffff; border: 2px solid #d4a574; box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2), 0 2px 6px rgba(212, 165, 116, 0.1); animation: pulse-subtle 3s infinite; } .collector-card.alert-box:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212, 165, 116, 0.3), 0 4px 12px rgba(212, 165, 116, 0.2); } .collector-card.alert-box h4, .collector-card.alert-box h5 { color: #5d4037; } /* Common Card Heading & Timing Styles */ .collector-card h4, .collector-card h5 { text-align: left; margin: 12px 0; font-weight: 600; color: #5d4037; display: flex; align-items: center; font-size: 1.1em; line-height: 1.4; flex-wrap: wrap; } .collector-card h4 strong { color: #b08d57; font-weight: 700; margin-left: 12px; padding: 6px 12px; border: 1px dashed #b08d57; border-radius: 6px; white-space: normal; font-size: 0.9em; background-color: rgba(248, 235, 208, 0.3); flex-shrink: 0; margin-top: 8px; } /* Styling for the PDF Link (Button Look) - Cream Theme */ .collector-card h5 a { color: #ffffff; text-decoration: none; font-weight: 700; display: block; width: 100%; margin: 15px auto 0 auto; padding: 12px 20px; background: linear-gradient(135deg, #d4a574, #b08d57); border-radius: 6px; text-align: center; font-size: 0.95em; box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3); letter-spacing: 0.2px; transition: all 0.3s ease; border: 2px solid transparent; } .collector-card h5 a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(176, 141, 87, 0.4); border-color: rgba(255, 255, 255, 0.3); } /* Main Heading Style - Cream Theme */ .collector-component h3 { margin-top: 30px; margin-bottom: 20px; color: #5d4037; font-weight: 700; font-size: 1.6em; border-bottom: 3px solid #d4a574; padding-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; position: relative; } .collector-component h3::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, #d4a574, #b08d57); border-radius: 2px; } /* District Info Body Text */ .district-info { font-size: 1em; color: #8d6e63; margin-bottom: 20px; text-align: justify; line-height: 1.6; padding: 0 5px; } /* Read More Link (Highlighted) - Cream Theme */ .read-more-link a { font-size: 1em; color: #b08d57; font-weight: 600; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid #b08d57; transition: all 0.3s ease; } .read-more-link a:hover { color: #8d6e63; border-bottom-color: #8d6e63; } /* Social Links Container - Cream Theme */ .social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; border-top: 1px solid rgba(212, 165, 116, 0.3); padding-top: 20px; justify-content: center; list-style: none; padding-left: 0; } /* Social Link Buttons - Cream Theme */ .social-links a { color: #5d4037; font-weight: 600; font-size: 0.85em; padding: 8px 16px; border: 2px solid #d4a574; border-radius: 6px; transition: all 0.3s ease; text-transform: capitalize; letter-spacing: 0; white-space: nowrap; flex-grow: 1; min-width: 120px; max-width: 48%; box-sizing: border-box; text-decoration: none; text-align: center; background: rgba(255, 255, 255, 0.9); } .social-links a:hover { background: linear-gradient(135deg, #d4a574, #b08d57); color: #ffffff; border-color: #b08d57; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3); } /* Responsive Overrides */ @media (max-width: 768px) { .collector-component { padding: 10px; } .social-links { justify-content: center; gap: 8px; } .social-links a { max-width: 100%; padding: 10px 15px; min-width: 140px; } .collector-card h4 { font-size: 1em; } .collector-card h4 strong { font-size: 0.9em; margin-top: 5px; margin-left: 0; } .collector-component h3 { font-size: 1.4em; } .collector-card { padding: 20px; } } @media (max-width: 480px) { .collector-card { padding: 18px; } .social-links a { min-width: 100%; max-width: 100%; } .collector-component h3 { font-size: 1.3em; } }