/** * ═══════════════════════════════════════════════════════════════════════════ * LAYER 120: UNIFIED ENGAGEMENT & NOTIFICATION STYLES * ═══════════════════════════════════════════════════════════════════════════ * * Merged CSS containing: * - Emergency Alert Bar (CRITICAL - must load in ) * - AI-Powered Related Content grid * * Version: 2.0.0 (Unified) * Status: ACTIVE | CRITICAL CSS * * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ EMERGENCY ALERT BAR (CRITICAL) ═══════════════════════════════════════════════════════════════════════════ */ .alert-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 100000; display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); font-family: 'Inter', sans-serif; color: white; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .alert-bar.level-critical { background: #ef4444; border-bottom: 2px solid #b91c1c; } .alert-bar.level-warning { background: #f59e0b; border-bottom: 2px solid #b45309; } .alert-bar.slide-down { transform: translateY(0); } .alert-bar.slide-up { transform: translateY(-100%); } .alert-content { display: flex; align-items: center; gap: 15px; flex: 1; } .alert-icon { font-size: 1.2rem; animation: alert-pulse 1s infinite; } .alert-label { background: rgba(0, 0, 0, 0.2); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.5px; white-space: nowrap; } .alert-text { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alert-time { margin-left: auto; font-size: 0.8rem; opacity: 0.8; white-space: nowrap; } .alert-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 0 0 15px; opacity: 0.7; transition: opacity 0.2s; } .alert-close:hover { opacity: 1; } @keyframes alert-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Mobile Responsive */ @media (max-width: 768px) { .alert-content { flex-direction: column; align-items: flex-start; gap: 5px; } .alert-time { display: none; } .alert-text { font-size: 0.9rem; white-space: normal; } } /* ═══════════════════════════════════════════════════════════════════════════ AI RELATED CONTENT ═══════════════════════════════════════════════════════════════════════════ */ .related-ai-wrapper { background: #111827; color: #fff; padding: 2rem; border-radius: 12px; margin: 3rem 0; font-family: 'Inter', sans-serif; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } .rai-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid #374151; padding-bottom: 1rem; } .rai-header h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #f3f4f6; } .rai-badge { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); color: #fff; font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.05em; box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); } .rai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .rai-card { background: #1f2937; border-radius: 8px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; border: 1px solid #374151; } .rai-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); border-color: #6366f1; } .rai-img { position: relative; width: 100%; aspect-ratio: 16/9; } .rai-img img { width: 100%; height: 100%; object-fit: cover; } .play-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 2px solid #fff; font-size: 1.2rem; padding-left: 3px; } .rai-content { padding: 1rem; } .rai-cat { font-size: 0.7rem; text-transform: uppercase; color: #9ca3af; font-weight: 700; display: block; margin-bottom: 0.5rem; } .rai-card h4 { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #f9fafb; font-weight: 600; } .rai-card.type-video h4::before { content: '🎥 '; }