/* GalaxyWarden Shared Styles */ /* Extracted from original working shared.py */ /* PERFORMANCE OPTIMIZED - January 2026 */ /* ============================================================================= GW ICON SYSTEM — SVG inline icons replacing emojis sitewide Usage: Sizing: inherits font-size. Override with .gw-icon-sm (12px), .gw-icon-lg (24px), .gw-icon-xl (48px) Color: inherits currentColor by default. Override with style="color:#xxx" ============================================================================= */ .gw-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: currentColor; } .gw-icon-sm { width: 12px; height: 12px; } .gw-icon-md { width: 16px; height: 16px; } .gw-icon-lg { width: 24px; height: 24px; } .gw-icon-xl { width: 48px; height: 48px; } .gw-icon-2xl { width: 64px; height: 64px; } /* ✓ / ✅ Checkmark */ .gw-icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } /* ✅ Circled check */ .gw-icon-check-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } /* ❌ X / Cross */ .gw-icon-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); } /* ⚠️ Warning triangle */ .gw-icon-warning { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); } /* 🛡️ Shield */ .gw-icon-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); } /* 🛡️✓ Shield with check */ .gw-icon-shield-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } /* 🚀 Rocket */ .gw-icon-rocket { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); } /* ⚡ Lightning bolt */ .gw-icon-bolt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); } /* 🎮 Gamepad */ .gw-icon-gamepad { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='10' y2='12'/%3E%3Cline x1='8' y1='10' x2='8' y2='14'/%3E%3Cline x1='15' y1='13' x2='15.01' y2='13'/%3E%3Cline x1='18' y1='11' x2='18.01' y2='11'/%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='10' y2='12'/%3E%3Cline x1='8' y1='10' x2='8' y2='14'/%3E%3Cline x1='15' y1='13' x2='15.01' y2='13'/%3E%3Cline x1='18' y1='11' x2='18.01' y2='11'/%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3C/svg%3E"); } /* 🔒 Lock */ .gw-icon-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E"); } /* 💡 Lightbulb */ .gw-icon-bulb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0018 8 6 6 0 006 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 018.91 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0018 8 6 6 0 006 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 018.91 14'/%3E%3C/svg%3E"); } /* 🏆 Trophy */ .gw-icon-trophy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 010-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 000-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0012 0V2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 010-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 000-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0012 0V2z'/%3E%3C/svg%3E"); } /* 🎯 Target / Crosshair */ .gw-icon-target { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); } /* 🎉 Party / Celebration */ .gw-icon-party { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.8 11.3L2 22l10.7-3.79'/%3E%3Cpath d='M4 3h.01'/%3E%3Cpath d='M22 8h.01'/%3E%3Cpath d='M15 2h.01'/%3E%3Cpath d='M22 20h.01'/%3E%3Cpath d='M22 2l-2.24.75a2.9 2.9 0 00-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10'/%3E%3Cpath d='M22 13l-1.34-.67c-.84-.42-1.79-.38-2.6.09L17 13'/%3E%3Cpath d='M11 2l.33 1.67c.18.9-.23 1.83-1.05 2.33L9 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.8 11.3L2 22l10.7-3.79'/%3E%3Cpath d='M4 3h.01'/%3E%3Cpath d='M22 8h.01'/%3E%3Cpath d='M15 2h.01'/%3E%3Cpath d='M22 20h.01'/%3E%3Cpath d='M22 2l-2.24.75a2.9 2.9 0 00-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10'/%3E%3Cpath d='M22 13l-1.34-.67c-.84-.42-1.79-.38-2.6.09L17 13'/%3E%3Cpath d='M11 2l.33 1.67c.18.9-.23 1.83-1.05 2.33L9 7'/%3E%3C/svg%3E"); } /* 🔍 Search / Magnifier */ .gw-icon-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); } /* ⚔️ Swords / Combat */ .gw-icon-swords { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5'/%3E%3Cpath d='M13 19l6-6'/%3E%3Cpath d='M16 16l4 4'/%3E%3Cpath d='M19 21l2-2'/%3E%3Cpath d='M14.5 6.5L18 3h3v3l-3.5 3.5'/%3E%3Cpath d='M5 14l4 4'/%3E%3Cpath d='M7 17l-2 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5'/%3E%3Cpath d='M13 19l6-6'/%3E%3Cpath d='M16 16l4 4'/%3E%3Cpath d='M19 21l2-2'/%3E%3Cpath d='M14.5 6.5L18 3h3v3l-3.5 3.5'/%3E%3Cpath d='M5 14l4 4'/%3E%3Cpath d='M7 17l-2 2'/%3E%3C/svg%3E"); } /* 🔥 Fire / Flame */ .gw-icon-fire { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 2.5z'/%3E%3C/svg%3E"); } /* 📊 Chart / Bar chart */ .gw-icon-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M6 20v-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M6 20v-6'/%3E%3C/svg%3E"); } /* 📈 Trending up */ .gw-icon-trending { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); } /* 🤖 Robot / AI */ .gw-icon-robot { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4'/%3E%3Cline x1='8' y1='16' x2='8' y2='16'/%3E%3Cline x1='16' y1='16' x2='16' y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4'/%3E%3Cline x1='8' y1='16' x2='8' y2='16'/%3E%3Cline x1='16' y1='16' x2='16' y2='16'/%3E%3C/svg%3E"); } /* 🔔 Bell / Notification */ .gw-icon-bell { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E"); } /* 🔄 Refresh / Sync */ .gw-icon-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6'/%3E%3Cpath d='M3 12a9 9 0 0115-6.7L21 8'/%3E%3Cpath d='M3 22v-6h6'/%3E%3Cpath d='M21 12a9 9 0 01-15 6.7L3 16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6'/%3E%3Cpath d='M3 12a9 9 0 0115-6.7L21 8'/%3E%3Cpath d='M3 22v-6h6'/%3E%3Cpath d='M21 12a9 9 0 01-15 6.7L3 16'/%3E%3C/svg%3E"); } /* 💰 Coins / Money */ .gw-icon-coins { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1110.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='M16.71 13.88l.7.71-2.82 2.82'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1110.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='M16.71 13.88l.7.71-2.82 2.82'/%3E%3C/svg%3E"); } /* 📡 Broadcast / Satellite */ .gw-icon-broadcast { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14'/%3E%3C/svg%3E"); } /* 🧠 Brain */ .gw-icon-brain { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0112 4.5v15a2.5 2.5 0 01-4.96.44 2.5 2.5 0 01-2.96-3.08 3 3 0 01-.34-5.58 2.5 2.5 0 011.32-4.24 2.5 2.5 0 011.98-3A2.5 2.5 0 019.5 2z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0012 4.5v15a2.5 2.5 0 004.96.44 2.5 2.5 0 002.96-3.08 3 3 0 00.34-5.58 2.5 2.5 0 00-1.32-4.24 2.5 2.5 0 00-1.98-3A2.5 2.5 0 0014.5 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0112 4.5v15a2.5 2.5 0 01-4.96.44 2.5 2.5 0 01-2.96-3.08 3 3 0 01-.34-5.58 2.5 2.5 0 011.32-4.24 2.5 2.5 0 011.98-3A2.5 2.5 0 019.5 2z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0012 4.5v15a2.5 2.5 0 004.96.44 2.5 2.5 0 002.96-3.08 3 3 0 00.34-5.58 2.5 2.5 0 00-1.32-4.24 2.5 2.5 0 00-1.98-3A2.5 2.5 0 0014.5 2z'/%3E%3C/svg%3E"); } /* ✨ Sparkle */ .gw-icon-sparkle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z'/%3E%3C/svg%3E"); } /* ⭐ Star */ .gw-icon-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); } /* 🔗 Link */ .gw-icon-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); } /* ➡️ Arrow right */ .gw-icon-arrow-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E"); } /* 🔑 Key */ .gw-icon-key { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/%3E%3C/svg%3E"); } /* 👤 User */ .gw-icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } /* 💎 Diamond / Gem */ .gw-icon-gem { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M11 3l1 10'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M7 9l5 13 5-13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M11 3l1 10'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M7 9l5 13 5-13'/%3E%3C/svg%3E"); } /* ⚙️ Gear / Settings */ .gw-icon-gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); } /* 🔮 Scan / Radar */ .gw-icon-radar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); } /* 💪 Strength / Flex */ .gw-icon-zap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); } /* 🛤️ Path / Road */ .gw-icon-path { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h5'/%3E%3Cpath d='M17 12h5'/%3E%3Cpath d='M10 12h4'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h5'/%3E%3Cpath d='M17 12h5'/%3E%3Cpath d='M10 12h4'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); } /* Import consolidated keyframes - single source of truth for all animations */ @import url('keyframes.css'); @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* PERF: Body background transparent to show cyber-bg layer */ html{background:#0a0e17;margin:0;padding:0;} body{background:transparent!important;margin:0;padding:0;overflow-x:hidden;} /* ============================================================================= PERFORMANCE: GLOBAL GPU HINTS & CONTAINMENT ============================================================================= */ /* Isolate expensive elements */ .cyber-bg, .cyber-grid, .particles, .scanlines, .nebula-layer, .shooting-stars { contain: strict; will-change: auto; /* Only apply will-change when animating */ } /* Reduce paint areas for fixed backgrounds */ .cyber-bg, .cyber-grid { backface-visibility: hidden; transform: translateZ(0); } /* Cards and containers use layout containment */ .card, .breach-card, .mission-card, .stat-card { contain: layout style; } /* ============================================================================= CONSOLIDATED KEYFRAMES - Remove duplicates throughout file ============================================================================= */ /* NOTE: All keyframes are now consolidated in keyframes.css */ /* Clean Cyberpunk Command Center - GalaxyWarden Theme */ /* WCAG 2.1 AA Compliant - Enhanced Accessibility */ :root { /* Core Colors - Deep Navy Command Center */ --bg-primary: #0a0e17; --bg-secondary: #1a1f2e; --bg-card: rgba(26, 31, 46, 0.95); --bg-elevated: rgba(30, 41, 59, 0.98); /* Text Hierarchy - Enhanced contrast ratios */ --text-primary: #e0e7ff; --text-secondary: #94a3b8; --text-muted: #64748b; /* Icy Blue Accent System - Matches logo colors */ --accent-cyan: #A8D5E5; --accent-cyan-dark: #7FC8DC; --accent-cyan-glow: rgba(168, 213, 229, 0.35); --accent-cyan-subtle: rgba(168, 213, 229, 0.12); --accent-blue: #60a5fa; --accent-purple: #a78bfa; --accent-dark-blue: #7FC8DC; --accent-cyan-text: #B8E0ED; /* Higher contrast for text */ /* === SPACE SECTOR COLORS === */ --sector-gaming: #A8D5E5; --sector-gaming-glow: rgba(168, 213, 229, 0.35); --sector-social: #a78bfa; --sector-social-glow: rgba(167, 139, 250, 0.3); --sector-messaging: #60a5fa; --sector-messaging-glow: rgba(96, 165, 250, 0.3); --sector-personal: #f59e0b; --sector-personal-glow: rgba(245, 158, 11, 0.3); /* Status Colors */ --success: #10b981; --success-glow: rgba(16, 185, 129, 0.3); --warning: #f59e0b; --warning-glow: rgba(245, 158, 11, 0.3); --danger: #ef4444; --danger-glow: rgba(239, 68, 68, 0.3); /* Shadows & Effects */ --shadow-glow: 0 0 20px var(--accent-cyan-glow); --shadow-cyan: 0 0 20px var(--accent-cyan-glow); --shadow-lift: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); /* Spacing & Sizing */ --border-radius: 12px; --border-radius-sm: 8px; --transition-fast: all 0.15s ease-out; --transition: all 0.25s ease-out; --transition-slow: all 0.4s ease-out; /* Animation durations */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; /* Easing functions */ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* === GLOBAL DARK SCROLLBAR STYLES === */ /* Works in Chrome, Edge, Safari */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.5); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: rgba(168, 213, 229, 0.5); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: rgba(15, 23, 42, 0.6); } /* Firefox scrollbar styling */ * { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.6); } /* Thin scrollbar variant for nested containers */ .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.4); } /* Hidden scrollbar but still scrollable */ .scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } /* Dark scrollbar utility class */ .dark-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .dark-scrollbar::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); border-radius: 4px; } .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.5); border-radius: 4px; } .dark-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(168, 213, 229, 0.5); } .dark-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.6); } /* === ANIMATION UTILITY CLASSES === */ /* Entrance animations */ .animate-fade-in { animation: gw-fade-in var(--duration-normal) var(--ease-out-expo) forwards; } .animate-slide-up { animation: gw-slide-up var(--duration-normal) var(--ease-out-expo) forwards; } .animate-slide-down { animation: gw-slide-down var(--duration-normal) var(--ease-out-expo) forwards; } .animate-bounce-in { animation: gw-bounce-in var(--duration-slow) var(--ease-bounce) forwards; } .animate-scale-in { animation: gw-scale-in var(--duration-fast) var(--ease-out-back) forwards; } @keyframes gw-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes gw-scale-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Staggered animations for lists */ .stagger-animation > * { opacity: 0; animation: gw-slide-up var(--duration-normal) var(--ease-out-expo) forwards; } .stagger-animation > *:nth-child(1) { animation-delay: 0ms; } .stagger-animation > *:nth-child(2) { animation-delay: 50ms; } .stagger-animation > *:nth-child(3) { animation-delay: 100ms; } .stagger-animation > *:nth-child(4) { animation-delay: 150ms; } .stagger-animation > *:nth-child(5) { animation-delay: 200ms; } .stagger-animation > *:nth-child(6) { animation-delay: 250ms; } .stagger-animation > *:nth-child(7) { animation-delay: 300ms; } .stagger-animation > *:nth-child(8) { animation-delay: 350ms; } /* Hover transition utilities */ .hover-lift { transition: transform var(--duration-fast) var(--ease-out-expo); } .hover-lift:hover { transform: translateY(-4px); } .hover-scale { transition: transform var(--duration-fast) var(--ease-out-expo); } .hover-scale:hover { transform: scale(1.02); } .hover-glow { transition: box-shadow var(--duration-normal) var(--ease-out-expo); } .hover-glow:hover { box-shadow: 0 0 20px var(--accent-cyan-glow), 0 10px 30px rgba(0, 0, 0, 0.3); } /* ============================================ 🎮 GALAXYWARDEN UI POLISH SYSTEM v5.2 Gaming-inspired micro-interactions & feedback ============================================ */ /* === MASTER ANIMATION KEYFRAMES === */ @keyframes gw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes gw-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes gw-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } @keyframes gw-bounce-in { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } @keyframes gw-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes gw-slide-down { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes gw-slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes gw-slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes gw-glow-pulse { 0%, 100% { box-shadow: 0 0 5px var(--accent-cyan-glow), 0 0 10px var(--accent-cyan-glow); } 50% { box-shadow: 0 0 15px var(--accent-cyan-glow), 0 0 30px var(--accent-cyan-glow); } } @keyframes gw-ripple { to { transform: scale(4); opacity: 0; } } @keyframes gw-check-draw { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } } @keyframes gw-counter-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes gw-progress-fill { from { width: 0; } } @keyframes gw-ring-fill { from { stroke-dashoffset: 283; } } @keyframes gw-scan-line { 0% { top: 0; opacity: 1; } 50% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } } @keyframes gw-shield-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px var(--success-glow)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 15px var(--success)); } } @keyframes gw-alert-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 50% { transform: translateY(0); } 75% { transform: translateY(-2px); } } @keyframes gw-typing { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes gw-success-ring { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes gw-level-up { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.2) rotate(-5deg); } 50% { transform: scale(1.3) rotate(5deg); } 75% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes gw-xp-gain { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } } /* === SKELETON LOADING SYSTEM === */ .skeleton { background: linear-gradient( 90deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 50%, rgba(30, 41, 59, 0.8) 100% ); background-size: 200% 100%; animation: gw-shimmer 1.5s ease-in-out infinite; border-radius: var(--border-radius-sm); } .skeleton-text { height: 1em; margin: 0.5em 0; border-radius: 4px; } .skeleton-text-sm { height: 0.8em; width: 60%; } .skeleton-text-md { height: 1em; width: 80%; } .skeleton-text-lg { height: 1.2em; width: 100%; } .skeleton-title { height: 1.5em; width: 70%; margin-bottom: 1em; border-radius: 6px; } .skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; } .skeleton-card { height: 120px; border-radius: var(--border-radius); } .skeleton-button { height: 44px; width: 120px; border-radius: var(--border-radius-sm); } .skeleton-icon { width: 24px; height: 24px; border-radius: 6px; } /* Skeleton card layout */ .skeleton-card-content { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .skeleton-card-header { display: flex; align-items: center; gap: 1rem; } .skeleton-card-body { display: flex; flex-direction: column; gap: 0.5rem; } /* === ENHANCED LOADING STATES === */ /* Full-page loading overlay */ .gw-loading-overlay { position: fixed; inset: 0; background: rgba(10, 14, 23, 0.9); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .gw-loading-overlay.active { opacity: 1; visibility: visible; } .gw-loading-spinner { width: 60px; height: 60px; border: 3px solid rgba(168, 213, 229, 0.2); border-top-color: #A8D5E5; border-radius: 50%; animation: gw-spin 1s linear infinite; } @keyframes gw-spin { to { transform: rotate(360deg); } } .gw-loading-text { margin-top: 16px; color: #94a3b8; font-size: 14px; animation: gw-pulse 1.5s ease-in-out infinite; } /* Inline loading spinner */ .gw-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(168, 213, 229, 0.3); border-top-color: #A8D5E5; border-radius: 50%; animation: gw-spin 0.8s linear infinite; } .gw-spinner-sm { width: 14px; height: 14px; border-width: 2px; } .gw-spinner-lg { width: 32px; height: 32px; border-width: 3px; } /* Button loading state */ .btn-loading { position: relative; pointer-events: none; color: transparent !important; } .btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: gw-spin 0.8s linear infinite; } /* Skeleton presets for common UI patterns */ .skeleton-breach-card { background: rgba(30, 41, 59, 0.5); border-radius: 12px; padding: 20px; border: 1px solid rgba(100, 116, 139, 0.2); } .skeleton-breach-card .skeleton-header { display: flex; gap: 16px; margin-bottom: 16px; } .skeleton-breach-card .skeleton-logo { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; } .skeleton-breach-card .skeleton-info { flex: 1; } .skeleton-stat-card { background: rgba(30, 41, 59, 0.5); border-radius: 12px; padding: 20px; min-height: 100px; } .skeleton-stat-card .skeleton-number { height: 2rem; width: 60px; margin-bottom: 8px; border-radius: 6px; } .skeleton-stat-card .skeleton-label { height: 0.875rem; width: 80px; border-radius: 4px; } /* Content placeholder while loading */ .gw-content-loading { opacity: 0.5; pointer-events: none; filter: blur(1px); transition: all 0.3s; } /* Pulse animation for loading items */ .gw-loading-pulse { animation: gw-loading-pulse 1.5s ease-in-out infinite; } @keyframes gw-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Progress bar for long operations */ .gw-progress { height: 4px; background: rgba(100, 116, 139, 0.3); border-radius: 2px; overflow: hidden; } .gw-progress-bar { height: 100%; background: linear-gradient(90deg, #A8D5E5, #6366f1); border-radius: 2px; transition: width 0.3s ease; } .gw-progress-indeterminate .gw-progress-bar { width: 30%; animation: gw-progress-slide 1.5s ease-in-out infinite; } @keyframes gw-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* Skeleton grid layouts */ .skeleton-grid { display: grid; gap: 16px; } .skeleton-grid-2 { grid-template-columns: repeat(2, 1fr); } .skeleton-grid-3 { grid-template-columns: repeat(3, 1fr); } .skeleton-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .skeleton-grid-2, .skeleton-grid-3, .skeleton-grid-4 { grid-template-columns: 1fr; } } /* === MOBILE RESPONSIVE UTILITIES === */ /* Hide on mobile */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } /* Hide on desktop */ @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* Responsive text */ .text-responsive { font-size: clamp(0.875rem, 2.5vw, 1rem); } .heading-responsive { font-size: clamp(1.25rem, 4vw, 2rem); } /* Mobile-optimized padding */ @media (max-width: 768px) { .container, .main-content { padding-left: 1rem; padding-right: 1rem; } .card, .stat-card, .feature-card { padding: 1rem; } } /* Mobile-optimized buttons */ @media (max-width: 480px) { .btn, .cta-btn { width: 100%; padding: 0.875rem 1.25rem; font-size: 1rem; } .btn-group { flex-direction: column; gap: 0.75rem; } } /* Touch-friendly spacing */ @media (max-width: 768px) { .touch-target { min-height: 44px; min-width: 44px; } /* Increase tap targets */ button, a.btn, .clickable { min-height: 44px; } } /* Mobile-safe fixed positioning */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .fixed-bottom { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } } /* Prevent horizontal scroll */ .overflow-safe { max-width: 100vw; overflow-x: hidden; } /* Mobile table handling */ @media (max-width: 768px) { .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-stack { display: block; } .table-stack thead { display: none; } .table-stack tr { display: block; margin-bottom: 1rem; background: rgba(30, 41, 59, 0.5); border-radius: 8px; padding: 1rem; } .table-stack td { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .table-stack td:last-child { border-bottom: none; } .table-stack td::before { content: attr(data-label); font-weight: 600; color: #64748b; } } /* Mobile form improvements */ @media (max-width: 768px) { input, select, textarea { font-size: 16px; /* Prevents iOS zoom on focus */ } } /* Safe area insets for notched devices */ @supports (padding: env(safe-area-inset-top)) { .safe-top { padding-top: env(safe-area-inset-top); } .safe-bottom { padding-bottom: env(safe-area-inset-bottom); } } /* === TOAST NOTIFICATION SYSTEM === */ .gw-toast-container { position: fixed; top: 80px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none; } @media (max-width: 480px) { .gw-toast-container { top: auto; bottom: 90px; right: 10px; left: 10px; max-width: none; } } .gw-toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); animation: gw-slide-in-right 0.3s ease-out; pointer-events: auto; position: relative; overflow: hidden; } .gw-toast.hiding { animation: gw-slide-out-right 0.3s ease-out forwards; } .gw-toast-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .gw-toast-content { flex: 1; min-width: 0; } .gw-toast-title { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 2px; } .gw-toast-message { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; } .gw-toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; margin: -4px -4px -4px 8px; border-radius: 6px; transition: all 0.15s; } .gw-toast-close:hover { background: rgba(100, 116, 139, 0.2); color: var(--text-primary); } .gw-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--accent-cyan); transition: width linear; } .gw-toast-actions { display: flex; gap: 8px; margin-top: 10px; } .gw-toast-action { padding: 6px 12px; font-size: 0.8rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.15s; } .gw-toast-action-primary { background: var(--accent-cyan); color: #000; border: none; } .gw-toast-action-primary:hover { background: #00d4ff; transform: translateY(-1px); } .gw-toast-action-secondary { background: transparent; color: var(--text-secondary); border: 1px solid rgba(100, 116, 139, 0.3); } .gw-toast-action-secondary:hover { background: rgba(100, 116, 139, 0.1); color: var(--text-primary); } /* Toast variants */ .gw-toast-success { border-color: rgba(16, 185, 129, 0.4); } .gw-toast-success .gw-toast-icon { color: var(--success); } .gw-toast-success .gw-toast-progress { background: var(--success); } .gw-toast-error { border-color: rgba(239, 68, 68, 0.4); } .gw-toast-error .gw-toast-icon { color: var(--danger); } .gw-toast-error .gw-toast-progress { background: var(--danger); } .gw-toast-warning { border-color: rgba(245, 158, 11, 0.4); } .gw-toast-warning .gw-toast-icon { color: var(--warning); } .gw-toast-warning .gw-toast-progress { background: var(--warning); } .gw-toast-info { border-color: rgba(168, 213, 229, 0.4); } .gw-toast-info .gw-toast-icon { color: var(--accent-cyan); } .gw-toast-info .gw-toast-progress { background: var(--accent-cyan); } .gw-toast-achievement { border-color: rgba(167, 139, 250, 0.4); background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 20, 50, 0.98)); } .gw-toast-achievement .gw-toast-icon { color: var(--accent-purple); } .gw-toast-achievement .gw-toast-progress { background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)); } /* === FORM VALIDATION & INPUT FEEDBACK === */ .gw-input { transition: all 0.2s ease; border: 1px solid rgba(100, 116, 139, 0.3); } .gw-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-subtle), 0 0 20px var(--accent-cyan-glow); outline: none; } .gw-input-error { border-color: var(--danger) !important; animation: gw-shake 0.4s ease; } .gw-input-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15), 0 0 20px var(--danger-glow); } .gw-input-success { border-color: var(--success) !important; } .gw-input-success:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 0 20px var(--success-glow); } .gw-input-wrapper { position: relative; } .gw-input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: 0; transition: all 0.2s ease; } .gw-input-icon.visible { opacity: 1; } .gw-input-icon-success { color: var(--success); } .gw-input-icon-error { color: var(--danger); } .gw-error-message { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--danger); margin-top: 6px; animation: gw-slide-down 0.2s ease; } /* Floating labels */ .gw-floating-label { position: relative; } .gw-floating-label label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.95rem; pointer-events: none; transition: all 0.2s ease; background: var(--bg-card); padding: 0 4px; } .gw-floating-label input:focus + label, .gw-floating-label input:not(:placeholder-shown) + label { top: 0; font-size: 0.75rem; color: var(--accent-cyan); } /* Password strength meter */ .gw-password-strength { height: 4px; background: rgba(100, 116, 139, 0.2); border-radius: 2px; margin-top: 8px; overflow: hidden; } .gw-password-strength-bar { height: 100%; border-radius: 2px; transition: all 0.3s ease; width: 0; } .gw-password-strength-bar[data-strength="weak"] { width: 25%; background: var(--danger); } .gw-password-strength-bar[data-strength="fair"] { width: 50%; background: var(--warning); } .gw-password-strength-bar[data-strength="good"] { width: 75%; background: #84cc16; } .gw-password-strength-bar[data-strength="strong"] { width: 100%; background: var(--success); } .gw-password-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; } /* === EMPTY STATES === */ .gw-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; text-align: center; } .gw-empty-icon { width: 80px; height: 80px; margin-bottom: 1.5rem; color: var(--text-muted); opacity: 0.5; } .gw-empty-icon svg { width: 100%; height: 100%; } .gw-empty-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .gw-empty-description { font-size: 0.9rem; color: var(--text-secondary); max-width: 300px; margin-bottom: 1.5rem; line-height: 1.5; } .gw-empty-action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); color: #000; font-weight: 600; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .gw-empty-action:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--accent-cyan-glow); } .gw-empty-hint { margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted); } .gw-empty-hint a { color: var(--accent-cyan); text-decoration: none; } .gw-empty-hint a:hover { text-decoration: underline; } /* Empty state variants */ .gw-empty-state-compact { padding: 2rem 1.5rem; } .gw-empty-state-compact .gw-empty-icon { width: 48px; height: 48px; margin-bottom: 1rem; } .gw-empty-state-compact .gw-empty-title { font-size: 1rem; } /* === BUTTON MICRO-INTERACTIONS === */ .gw-btn { position: relative; overflow: hidden; transition: all 0.2s ease; transform: translateY(0); } .gw-btn:hover { transform: translateY(-2px); } .gw-btn:active { transform: translateY(0) scale(0.98); } /* Ripple effect */ .gw-btn-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: gw-ripple 0.6s linear; pointer-events: none; } /* Loading state */ .gw-btn-loading { pointer-events: none; position: relative; } .gw-btn-loading .gw-btn-text { opacity: 0; } .gw-btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; } /* Button glow on hover */ .gw-btn-glow:hover { box-shadow: 0 0 20px var(--accent-cyan-glow), 0 8px 25px rgba(0, 0, 0, 0.3); } /* Button disabled tooltip */ .gw-btn-disabled-wrapper { position: relative; display: inline-block; } .gw-btn-disabled-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 8px 12px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 100; } .gw-btn-disabled-wrapper:hover .gw-btn-disabled-tooltip { opacity: 1; visibility: visible; } /* === CARD HOVER EFFECTS === */ .gw-card { transition: all 0.25s ease; border: 1px solid rgba(100, 116, 139, 0.2); } .gw-card:hover { transform: translateY(-4px); border-color: rgba(168, 213, 229, 0.3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--accent-cyan-glow); } .gw-card-interactive { cursor: pointer; } .gw-card-interactive:active { transform: translateY(-2px) scale(0.99); } /* Card glow variants */ .gw-card-glow-success:hover { border-color: rgba(16, 185, 129, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--success-glow); } .gw-card-glow-warning:hover { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--warning-glow); } .gw-card-glow-danger:hover { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--danger-glow); } .gw-card-glow-purple:hover { border-color: rgba(167, 139, 250, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(167, 139, 250, 0.3); } /* Card selected state */ .gw-card-selected { border-color: var(--accent-cyan) !important; box-shadow: 0 0 0 2px var(--accent-cyan-subtle), 0 8px 30px rgba(0, 0, 0, 0.3); } /* === PROGRESS INDICATORS === */ /* Progress bar with animation */ .gw-progress { height: 8px; background: rgba(100, 116, 139, 0.2); border-radius: 4px; overflow: hidden; } .gw-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)); border-radius: 4px; transition: width 0.5s ease; position: relative; } .gw-progress-bar.animated { animation: gw-progress-fill 1s ease forwards; } .gw-progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: gw-shimmer 2s ease-in-out infinite; background-size: 200% 100%; } /* Circular progress ring */ .gw-progress-ring { transform: rotate(-90deg); } .gw-progress-ring-bg { fill: none; stroke: rgba(100, 116, 139, 0.2); } .gw-progress-ring-fill { fill: none; stroke: var(--accent-cyan); stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; } .gw-progress-ring-fill.animated { animation: gw-ring-fill 1s ease forwards; } /* Progress with label */ .gw-progress-labeled { display: flex; flex-direction: column; gap: 6px; } .gw-progress-label { display: flex; justify-content: space-between; font-size: 0.85rem; } .gw-progress-label-text { color: var(--text-secondary); } .gw-progress-label-value { color: var(--text-primary); font-weight: 600; } /* Step progress */ .gw-steps { display: flex; align-items: center; gap: 0; } .gw-step { display: flex; align-items: center; } .gw-step-indicator { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; background: rgba(100, 116, 139, 0.2); color: var(--text-muted); transition: all 0.3s ease; } .gw-step-line { width: 40px; height: 2px; background: rgba(100, 116, 139, 0.2); transition: all 0.3s ease; } .gw-step.completed .gw-step-indicator { background: var(--success); color: #fff; } .gw-step.completed .gw-step-line { background: var(--success); } .gw-step.active .gw-step-indicator { background: var(--accent-cyan); color: #000; box-shadow: 0 0 15px var(--accent-cyan-glow); } /* === SUCCESS ANIMATIONS (Gamer Style) === */ .gw-success-check { width: 64px; height: 64px; position: relative; } .gw-success-check-circle { stroke: var(--success); stroke-width: 2; fill: none; animation: gw-bounce-in 0.5s ease forwards; } .gw-success-check-mark { stroke: var(--success); stroke-width: 3; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; animation: gw-check-draw 0.3s ease 0.3s forwards; } /* Achievement/Level up celebration (no confetti, gamer style) */ .gw-achievement-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 20, 50, 0.98)); border: 2px solid var(--accent-purple); border-radius: 16px; padding: 2rem 3rem; text-align: center; z-index: 10001; animation: gw-bounce-in 0.5s ease forwards; box-shadow: 0 0 60px rgba(167, 139, 250, 0.4), 0 0 100px rgba(167, 139, 250, 0.2), 0 20px 60px rgba(0, 0, 0, 0.5); } .gw-achievement-icon { width: 80px; height: 80px; margin: 0 auto 1rem; animation: gw-level-up 0.6s ease 0.3s; } .gw-achievement-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--accent-purple); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 2px; } .gw-achievement-subtitle { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1rem; } .gw-achievement-xp { display: inline-block; padding: 6px 16px; background: rgba(16, 185, 129, 0.2); border: 1px solid var(--success); border-radius: 20px; color: var(--success); font-weight: 600; font-size: 0.9rem; } /* XP gain floating text */ .gw-xp-float { position: absolute; font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--success); text-shadow: 0 0 10px var(--success-glow); animation: gw-xp-gain 1.5s ease forwards; pointer-events: none; } /* Mission complete banner */ .gw-mission-complete { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); border: 1px solid var(--success); border-radius: 12px; animation: gw-slide-up 0.4s ease; } .gw-mission-complete-icon { width: 48px; height: 48px; color: var(--success); animation: gw-shield-pulse 2s ease-in-out infinite; } .gw-mission-complete-text { flex: 1; } .gw-mission-complete-title { font-weight: 700; color: var(--success); font-size: 1.1rem; } .gw-mission-complete-subtitle { font-size: 0.85rem; color: var(--text-secondary); } /* === ICON ANIMATIONS === */ .gw-icon-pulse { animation: gw-glow-pulse 2s ease-in-out infinite; } .gw-icon-bounce { animation: gw-alert-bounce 1s ease infinite; } .gw-icon-shield-active { animation: gw-shield-pulse 2s ease-in-out infinite; } .gw-icon-scan { position: relative; } .gw-icon-scan::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); animation: gw-scan-line 2s ease-in-out infinite; } .gw-icon-spin { animation: spin 1s linear infinite; } /* Notification badge with animation */ .gw-badge-notify { position: relative; } .gw-badge-notify::after { content: attr(data-count); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; animation: gw-bounce-in 0.3s ease; } .gw-badge-notify.pulse::after { animation: gw-bounce-in 0.3s ease, pulse 2s ease-in-out infinite 0.3s; } /* === ANIMATED NUMBER COUNTER === */ .gw-counter { display: inline-block; font-variant-numeric: tabular-nums; } .gw-counter.counting { animation: gw-counter-up 0.3s ease; } /* Large stat counter */ .gw-stat-counter { font-family: 'Exo 2', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .gw-stat-counter-label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.5rem; } /* Score ring with counter */ .gw-score-display { position: relative; display: inline-flex; align-items: center; justify-content: center; } .gw-score-ring { width: 120px; height: 120px; } .gw-score-value { position: absolute; font-family: 'Exo 2', sans-serif; font-size: 2rem; font-weight: 700; } .gw-score-label { position: absolute; bottom: 25%; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } /* === ADVANCED TRANSITIONS === */ /* Page transition overlay */ .gw-page-transition { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0a0e17; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .gw-page-transition.active { opacity: 1; pointer-events: auto; } /* Staggered list animation */ .gw-stagger-list > * { opacity: 0; transform: translateY(20px); animation: gw-slide-up 0.4s ease forwards; } .gw-stagger-list > *:nth-child(1) { animation-delay: 0.05s; } .gw-stagger-list > *:nth-child(2) { animation-delay: 0.1s; } .gw-stagger-list > *:nth-child(3) { animation-delay: 0.15s; } .gw-stagger-list > *:nth-child(4) { animation-delay: 0.2s; } .gw-stagger-list > *:nth-child(5) { animation-delay: 0.25s; } .gw-stagger-list > *:nth-child(6) { animation-delay: 0.3s; } .gw-stagger-list > *:nth-child(7) { animation-delay: 0.35s; } .gw-stagger-list > *:nth-child(8) { animation-delay: 0.4s; } .gw-stagger-list > *:nth-child(n+9) { animation-delay: 0.45s; } /* Smooth scroll behavior */ .gw-smooth-scroll { scroll-behavior: smooth; } /* Reveal on scroll */ .gw-reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .gw-reveal.visible { opacity: 1; transform: translateY(0); } /* Hover reveal content */ .gw-hover-reveal { overflow: hidden; } .gw-hover-reveal-content { transform: translateY(100%); transition: transform 0.3s ease; } .gw-hover-reveal:hover .gw-hover-reveal-content { transform: translateY(0); } /* Tooltip with animation */ .gw-tooltip { position: relative; } .gw-tooltip-content { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(5px); padding: 8px 12px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1000; } .gw-tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(15, 23, 42, 0.95); } .gw-tooltip:hover .gw-tooltip-content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Auto-save indicator */ .gw-autosave { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); transition: all 0.2s ease; } .gw-autosave.saving { color: var(--accent-cyan); } .gw-autosave.saved { color: var(--success); } .gw-autosave-icon { width: 14px; height: 14px; } .gw-autosave.saving .gw-autosave-icon { animation: spin 1s linear infinite; } /* Typing indicator */ .gw-typing-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; background: rgba(100, 116, 139, 0.1); border-radius: 16px; } .gw-typing-dot { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: gw-typing 1.4s ease-in-out infinite; } .gw-typing-dot:nth-child(2) { animation-delay: 0.2s; } .gw-typing-dot:nth-child(3) { animation-delay: 0.4s; } /* Pull to refresh (mobile) */ .gw-pull-refresh { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-card); border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; opacity: 0; } .gw-pull-refresh.visible { opacity: 1; top: 10px; } .gw-pull-refresh.refreshing svg { animation: spin 1s linear infinite; } /* === MODAL ENHANCEMENTS === */ .gw-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .gw-modal-overlay.active { opacity: 1; visibility: visible; } .gw-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: var(--bg-card); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 16px; padding: 0; max-width: 500px; width: 90%; max-height: 85vh; overflow: hidden; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 40px var(--accent-cyan-glow); } .gw-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .gw-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .gw-modal-title { font-family: 'Exo 2', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 10px; } .gw-modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 4px; line-height: 1; border-radius: 6px; transition: all 0.2s; } .gw-modal-close:hover { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .gw-modal-body { padding: 1.5rem; overflow-y: auto; max-height: calc(85vh - 140px); } .gw-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 1rem 1.5rem; border-top: 1px solid rgba(100, 116, 139, 0.2); background: rgba(15, 23, 42, 0.5); } /* Modal variants */ .gw-modal-danger .gw-modal-header { border-bottom-color: rgba(239, 68, 68, 0.3); } .gw-modal-danger .gw-modal-title { color: var(--danger); } .gw-modal-success { border-color: rgba(16, 185, 129, 0.3); } /* === TAB ANIMATIONS === */ .gw-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(15, 23, 42, 0.5); border-radius: 12px; position: relative; } .gw-tab { position: relative; padding: 10px 20px; background: transparent; border: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; cursor: pointer; border-radius: 8px; transition: all 0.25s ease; z-index: 1; } .gw-tab:hover { color: var(--text-secondary); } .gw-tab.active { color: var(--text-primary); } .gw-tab-indicator { position: absolute; height: calc(100% - 8px); top: 4px; background: var(--bg-card); border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .gw-tab-content { position: relative; overflow: hidden; } .gw-tab-panel { display: none; animation: gw-fade-tab 0.3s ease; } .gw-tab-panel.active { display: block; } @keyframes gw-fade-tab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Vertical tabs */ .gw-tabs-vertical { flex-direction: column; width: fit-content; } .gw-tabs-vertical .gw-tab-indicator { width: calc(100% - 8px); left: 4px; height: auto; } /* === DROPDOWN/SELECT ENHANCEMENTS === */ .gw-select-wrapper { position: relative; } .gw-select { appearance: none; width: 100%; padding: 12px 40px 12px 14px; background: var(--bg-card); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 10px; color: var(--text-primary); font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; } .gw-select:hover { border-color: rgba(100, 116, 139, 0.5); } .gw-select:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-subtle), 0 0 20px var(--accent-cyan-glow); outline: none; } .gw-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; transition: transform 0.2s ease; } .gw-select:focus + .gw-select-arrow { color: var(--accent-cyan); transform: translateY(-50%) rotate(180deg); } /* Custom dropdown */ .gw-dropdown { position: relative; } .gw-dropdown-trigger { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-card); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 10px; color: var(--text-primary); cursor: pointer; transition: all 0.2s ease; } .gw-dropdown-trigger:hover { border-color: rgba(100, 116, 139, 0.5); } .gw-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: var(--bg-elevated); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 100; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .gw-dropdown.open .gw-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .gw-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-secondary); border-radius: 8px; cursor: pointer; transition: all 0.15s ease; } .gw-dropdown-item:hover { background: rgba(168, 213, 229, 0.1); color: var(--text-primary); } .gw-dropdown-item.active { background: rgba(168, 213, 229, 0.15); color: var(--accent-cyan); } .gw-dropdown-divider { height: 1px; background: rgba(100, 116, 139, 0.2); margin: 6px 0; } /* === TOGGLE/SWITCH === */ .gw-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .gw-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .gw-toggle-track { position: relative; width: 48px; height: 26px; background: rgba(100, 116, 139, 0.3); border-radius: 13px; transition: all 0.3s ease; } .gw-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--text-muted); border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .gw-toggle-input:checked + .gw-toggle-track { background: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan-glow); } .gw-toggle-input:checked + .gw-toggle-track .gw-toggle-thumb { left: 25px; background: #fff; } .gw-toggle-input:focus + .gw-toggle-track { box-shadow: 0 0 0 3px var(--accent-cyan-subtle); } .gw-toggle-label { color: var(--text-secondary); font-size: 0.9rem; user-select: none; } /* Toggle sizes */ .gw-toggle-sm .gw-toggle-track { width: 36px; height: 20px; } .gw-toggle-sm .gw-toggle-thumb { width: 14px; height: 14px; } .gw-toggle-sm .gw-toggle-input:checked + .gw-toggle-track .gw-toggle-thumb { left: 19px; } /* Toggle with icons */ .gw-toggle-icons .gw-toggle-track { width: 56px; } .gw-toggle-icons .gw-toggle-track::before, .gw-toggle-icons .gw-toggle-track::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; transition: opacity 0.2s; } .gw-toggle-icons .gw-toggle-track::before { content: '✕'; right: 8px; opacity: 1; } .gw-toggle-icons .gw-toggle-track::after { content: '✓'; left: 8px; opacity: 0; color: #fff; } .gw-toggle-icons .gw-toggle-input:checked + .gw-toggle-track::before { opacity: 0; } .gw-toggle-icons .gw-toggle-input:checked + .gw-toggle-track::after { opacity: 1; } .gw-toggle-icons .gw-toggle-input:checked + .gw-toggle-track .gw-toggle-thumb { left: 33px; } /* === ACCORDION === */ .gw-accordion { border: 1px solid rgba(100, 116, 139, 0.2); border-radius: 12px; overflow: hidden; } .gw-accordion-item { border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .gw-accordion-item:last-child { border-bottom: none; } .gw-accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; background: transparent; border: none; color: var(--text-primary); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: left; } .gw-accordion-header:hover { background: rgba(168, 213, 229, 0.05); } .gw-accordion-icon { width: 20px; height: 20px; color: var(--text-muted); transition: transform 0.3s ease; } .gw-accordion-item.open .gw-accordion-icon { transform: rotate(180deg); color: var(--accent-cyan); } .gw-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .gw-accordion-item.open .gw-accordion-body { max-height: 500px; } .gw-accordion-content { padding: 0 20px 16px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; } /* Accordion variants */ .gw-accordion-flush { border: none; border-radius: 0; } .gw-accordion-flush .gw-accordion-item { border-bottom: 1px solid rgba(100, 116, 139, 0.15); } .gw-accordion-cards .gw-accordion-item { margin-bottom: 8px; border: 1px solid rgba(100, 116, 139, 0.2); border-radius: 10px; } .gw-accordion-cards .gw-accordion-item:last-child { margin-bottom: 0; } /* === SMOOTH SCROLL & ANCHOR === */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .gw-modal, .gw-tab-panel, .gw-dropdown-menu, .gw-accordion-body, .gw-toggle-thumb, .gw-toggle-track { transition: none !important; } } /* Scroll margin for anchors (account for sticky header) */ [id] { scroll-margin-top: 80px; } /* === FOCUS VISIBLE ENHANCEMENTS === */ :focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } button:focus-visible, .btn:focus-visible, .gw-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-cyan-subtle), 0 0 15px var(--accent-cyan-glow); } /* === ACCESSIBILITY UTILITIES === */ /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip to main content link */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--accent-cyan); color: #0a0e17; padding: 0.75rem 1.5rem; z-index: 100000; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; transition: top 0.3s; } .skip-link:focus { top: 0; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .particles, .shooting-stars, .nebula-layer { display: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .btn, .gw-btn, .card, .stat-card { border: 2px solid currentColor; } :focus-visible { outline-width: 3px; } } /* Focus trap for modals */ .focus-trap { position: fixed; inset: 0; } .focus-trap:not(.active) { display: none; } /* Keyboard navigation indicators */ [data-keyboard-nav] button:focus-visible, [data-keyboard-nav] a:focus-visible { position: relative; } [data-keyboard-nav] button:focus-visible::after, [data-keyboard-nav] a:focus-visible::after { content: ''; position: absolute; inset: -4px; border: 2px dashed var(--accent-cyan); border-radius: inherit; pointer-events: none; } /* Interactive element hints */ [role="button"]:not(button) { cursor: pointer; } [aria-disabled="true"], [disabled] { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* Live region for dynamic content */ .live-region { position: absolute; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; } /* === LOADING OVERLAY === */ .gw-loading-overlay { position: fixed; inset: 0; background: rgba(10, 14, 23, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .gw-loading-overlay.active { opacity: 1; visibility: visible; } .gw-loading-spinner { width: 48px; height: 48px; border: 3px solid rgba(100, 116, 139, 0.2); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 1s linear infinite; } .gw-loading-text { margin-top: 16px; color: var(--text-secondary); font-size: 0.9rem; } /* === DATA TABLE ENHANCEMENTS === */ .gw-table { width: 100%; border-collapse: collapse; } .gw-table th { text-align: left; padding: 12px 16px; background: rgba(15, 23, 42, 0.5); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .gw-table td { padding: 14px 16px; color: var(--text-secondary); border-bottom: 1px solid rgba(100, 116, 139, 0.1); transition: background 0.15s ease; } .gw-table tr:hover td { background: rgba(168, 213, 229, 0.03); } .gw-table tr:last-child td { border-bottom: none; } /* Sortable columns */ .gw-table th.sortable { cursor: pointer; user-select: none; } .gw-table th.sortable:hover { color: var(--text-secondary); } .gw-table th.sortable::after { content: '↕'; margin-left: 6px; opacity: 0.4; } .gw-table th.sort-asc::after { content: '↑'; opacity: 1; color: var(--accent-cyan); } .gw-table th.sort-desc::after { content: '↓'; opacity: 1; color: var(--accent-cyan); } /* === IMAGE LOADING === */ .gw-img-loading { position: relative; overflow: hidden; background: rgba(30, 41, 59, 0.5); } .gw-img-loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); animation: gw-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; } .gw-img-loading img { opacity: 0; transition: opacity 0.3s ease; } .gw-img-loading.loaded::before { display: none; } .gw-img-loading.loaded img { opacity: 1; } Inline SVG icons with cyberpunk aesthetic Based on AvastJS Cyber-Icons theme ============================================ */ .cyber-icon { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: middle; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* SVG inside cyber-icon should fill container */ .cyber-icon svg { width: 100%; height: 100%; display: block; } /* Default stroke only when not specified inline */ .cyber-icon svg:not([stroke]) { stroke: var(--accent-cyan); } /* Glow effect for default icons */ .cyber-icon:not(.no-glow) svg:not([stroke]) { filter: drop-shadow(0 0 2px var(--accent-cyan-glow)); } /* External SVG icon styling */ .ci { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: middle; object-fit: contain; } .ci-xs { width: 0.8em; height: 0.8em; } .ci-sm { width: 1em; height: 1em; } .ci-md { width: 1.5em; height: 1.5em; } .ci-lg { width: 2em; height: 2em; } .ci-xl { width: 2.5em; height: 2.5em; } .ci-2x { width: 3em; height: 3em; } .ci-3x { width: 4em; height: 4em; } /* Icon container for flex layouts */ .ci-box { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 213, 229, 0.1)); border-radius: 10px; padding: 0.4em; } .ci-box .ci { width: 100%; height: 100%; } .cyber-icon-sm { width: 0.9em; height: 0.9em; } .cyber-icon-md { width: 1.5em; height: 1.5em; } .cyber-icon-lg { width: 2em; height: 2em; } .cyber-icon-xl { width: 2.5em; height: 2.5em; } /* Icon color variants */ .cyber-icon-success { stroke: var(--success); } .cyber-icon-warning { stroke: var(--warning); } .cyber-icon-danger { stroke: var(--danger); } .cyber-icon-purple { stroke: var(--accent-purple); } .cyber-icon-muted { stroke: var(--text-muted); filter: none; } /* Gradient icon variants */ .cyber-icon-grad-stellar svg { stroke: url(#gw-grad-stellar); } .cyber-icon-grad-jupiter svg { stroke: url(#gw-grad-jupiter); } .cyber-icon-grad-success svg { stroke: url(#gw-grad-success); } .cyber-icon-grad-alert svg { stroke: url(#gw-grad-alert); } .cyber-icon-grad-eclipse svg { stroke: url(#gw-grad-eclipse); } .cyber-icon-grad-spacex svg { stroke: url(#gw-grad-spacex); } /* Animated glow effect */ .cyber-icon-glow { animation: iconGlow 2s ease-in-out infinite; } @keyframes iconGlow { 0%, 100% { filter: drop-shadow(0 0 2px var(--accent-cyan-glow)); } 50% { filter: drop-shadow(0 0 8px var(--accent-cyan-glow)); } } /* ===== CYBER ICONS SYSTEM ===== */ /* SVG inline icon styling - cyberpunk/space theme */ .cyber-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; } .cyber-icon svg { width: 100%; height: 100%; } .cyber-icon-sm { width: 16px; height: 16px; } .cyber-icon-md { width: 24px; height: 24px; } .cyber-icon-lg { width: 32px; height: 32px; } .cyber-icon-xl { width: 48px; height: 48px; } /* Animated cyber icon variants */ .cyber-icon-pulse svg { animation: cyberPulse 2s ease-in-out infinite; } .cyber-icon-glow { filter: drop-shadow(0 0 6px var(--accent-cyan)); } .cyber-icon-glow-alert { filter: drop-shadow(0 0 6px var(--danger)); } .cyber-icon-spin svg { animation: cyberSpin 2s linear infinite; } @keyframes cyberPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } } @keyframes cyberSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .particles, .cyber-grid, .scanlines { display: none !important; } } /* ===== MOBILE BROWSER COMPATIBILITY ===== */ /* Touch-optimized interactions */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets (48px minimum per WCAG) */ button, .btn, a.btn, .sidebar-link, .nav-link, input, select, textarea { min-height: 48px; } /* Remove hover effects on touch devices */ .sidebar-link:hover, .btn:hover, .dashboard-card:hover { transform: none !important; } /* Active states for touch feedback */ .sidebar-link:active, .btn:active { transform: scale(0.98) !important; opacity: 0.9; } } /* Prevent text size adjustment on orientation change */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* ===== CRITICAL MOBILE VIEWPORT & SCROLL FIXES ===== */ /* Fixes: white bar at bottom, flickering, iOS Chrome crashes */ /* Base: html transparent, cyber-bg provides color */ html { background-color: transparent; } /* Mobile scroll and viewport fixes */ @media (max-width: 768px) { html { /* Dark fallback background - cyber-bg overlays on top */ background-color: #0a0e17; background: #0a0e17; /* iOS viewport height fix */ height: 100%; height: -webkit-fill-available; /* html does NOT scroll — body handles it */ overflow: hidden; } body { /* Use fill-available instead of 100vh */ min-height: 100%; min-height: -webkit-fill-available; /* Dark fallback - cyber-bg is positioned on top */ background: #0a0e17; background-color: #0a0e17; /* CRITICAL: Body is THE scroll container on mobile */ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */ /* Remove GPU transform that can cause issues */ -webkit-transform: none; transform: none; } /* Fixed backgrounds: extend beyond viewport */ .cyber-bg, .cyber-grid, .particles, .scanlines, .nebula-layer, .shooting-stars, .shared-nebula { /* Extend to cover overscroll bounce */ top: -100px !important; bottom: -100px !important; height: calc(100% + 200px) !important; /* Remove GPU acceleration that causes crashes */ will-change: auto !important; -webkit-transform: none !important; transform: none !important; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; /* No animations */ animation: none !important; } /* Cyber-bg provides the base gradient layer */ .cyber-bg { /* Allow gradient to show through - no solid override */ background: radial-gradient(ellipse at 20% 20%, rgba(168, 213, 229, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(167, 139, 250, 0.05) 0%, transparent 50%), linear-gradient(180deg, #0a0e17 0%, #1a1f2e 50%, #0a0e17 100%) !important; } } /* iOS-specific fixes (Safari and Chrome) */ @supports (-webkit-touch-callout: none) { /* iOS viewport height bug fix */ html { height: -webkit-fill-available; overflow: hidden; } body { min-height: -webkit-fill-available; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* iOS: Change fixed to absolute to prevent GPU crashes */ @media (max-width: 768px) { .cyber-bg, .cyber-grid, .particles, .scanlines, .nebula-layer, .shooting-stars, .shared-nebula { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; /* Tall enough to cover any scroll */ min-height: 300vh !important; height: auto !important; /* Absolutely no GPU acceleration */ -webkit-transform: none !important; transform: none !important; will-change: auto !important; animation: none !important; -webkit-animation: none !important; } /* Wrapper for backgrounds */ body { position: relative; } } } /* Small phones: Simplified effects (not hidden) */ @media (max-width: 480px) { /* Hide only heavy effects, keep lightweight ones */ .particles, .shooting-stars, #threejs-starfield, .glow-particle, .particle { display: none !important; visibility: hidden !important; } /* Keep grid visible with reduced opacity */ .cyber-grid { display: block !important; visibility: visible !important; opacity: 0.35 !important; animation: none !important; background-size: 60px 60px; } /* Keep nebula visible */ .nebula-layer, .shared-nebula { display: block !important; visibility: visible !important; opacity: 0.5 !important; animation: none !important; } /* Keep scanlines subtle */ .scanlines { display: block !important; opacity: 0.15 !important; } /* Cyber-bg with visible gradient effects */ .cyber-bg { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 100% !important; min-height: 100% !important; /* Gradient with subtle glow effects */ background: radial-gradient(ellipse at 20% 20%, rgba(168, 213, 229, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(167, 139, 250, 0.06) 0%, transparent 50%), linear-gradient(180deg, #0a0e17 0%, #1e293b 50%, #0a0e17 100%) !important; z-index: -10 !important; /* No transforms or animations */ -webkit-transform: none !important; transform: none !important; animation: none !important; } /* Body has dark fallback - cyber-bg shows on top with z-index */ html, body { background: #0a0e17 !important; background-color: #0a0e17 !important; } } /* Ensure content is above backgrounds */ .main-content, .container, .page-content, main, section, .dashboard-container { position: relative; z-index: 1; } /* Footer blends with background */ @media (max-width: 768px) { footer, .footer { background-color: transparent; position: relative; z-index: 1; } } /* Safe area insets for notched devices */ .main-content { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(2rem, env(safe-area-inset-bottom)); position: relative; z-index: 1; } /* Desktop: Ensure main content doesn't overlap sidebar */ @media (min-width: 1024px) { body.has-sidebar .main-content { padding-left: max(1rem, env(safe-area-inset-left)); } body.has-sidebar.sidebar-collapsed .main-content { padding-left: max(1rem, env(safe-area-inset-left)); } } /* Ensure all page content is above background effects */ main, .page-content, .dashboard-container, .container, section { position: relative; z-index: 1; } /* High-DPI/Retina display optimizations */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .icon-svg { shape-rendering: geometricPrecision; } img { image-rendering: -webkit-optimize-contrast; } } /* Mobile-first responsive breakpoints */ @media (max-width: 1024px) { :root { --border-radius: 10px; --border-radius-sm: 6px; } } @media (max-width: 768px) { html { font-size: 15px; } .dashboard-cards { grid-template-columns: 1fr !important; gap: 1rem; } .sector-info { grid-template-columns: 1fr !important; } /* Full-width buttons on mobile */ .btn, .quick-btn, .panel-action { width: 100%; justify-content: center; } /* Stack horizontal layouts */ .dashboard-header-right { flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .galaxy-stats { flex-wrap: wrap; justify-content: center; gap: 0.75rem; } /* Larger font sizes for readability */ .sidebar-section-title { font-size: 0.75rem; } .sidebar-link-text { font-size: 0.95rem; } } @media (max-width: 480px) { html { font-size: 14px; } /* Compact spacing */ .dashboard-card { padding: 1rem; } .sector-panel { padding: 1rem; } /* Prevent horizontal scroll */ body, html { overflow-x: hidden; max-width: 100vw; } /* Full-width elements */ .info-card, .stat-item { width: 100%; } } /* Orientation-specific adjustments */ @media (orientation: landscape) and (max-height: 500px) { .galaxy-viewport { max-height: 60vh; } .sidebar-nav { height: 100vh; overflow-y: auto; } } /* ===== COMPREHENSIVE MOBILE HUB OPTIMIZATIONS ===== */ /* Phase 2: Element-Specific Mobile Updates */ /* ===== MOBILE ANTI-FLICKER OPTIMIZATIONS ===== */ /* Force GPU acceleration on fixed backgrounds to prevent scroll flicker */ .cyber-bg, .cyber-grid, .particles, .scanlines, .nebula-layer, .shooting-stars { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; } /* Universal mobile scroll — ensure body scrolls on all mobile browsers */ @media (max-width: 768px) { html { overflow: hidden; } html, body { -webkit-overflow-scrolling: touch; } body { overflow-y: auto; } } /* Mobile: Disable problematic effects that cause flicker */ @media (max-width: 768px) { /* Completely disable scanlines on mobile - causes repaint on scroll */ .scanlines { opacity: 0.2 !important; } /* Disable shooting stars canvas on tablets and phones */ .shooting-stars { display: none !important; } /* Visible cyber-grid - no animation */ .cyber-grid { display: block !important; visibility: visible !important; animation: none !important; opacity: 0.45; will-change: auto; } /* Simplify cyber-bg - static only */ .cyber-bg { will-change: auto; /* Ensure visible gradient */ background: radial-gradient(ellipse at 20% 20%, rgba(168, 213, 229, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(167, 139, 250, 0.06) 0%, transparent 50%), linear-gradient(180deg, #0a0e17 0%, #1a1f2e 50%, #0a0e17 100%) !important; } /* Visible nebula - no animation */ .nebula-layer, .shared-nebula { display: block !important; visibility: visible !important; animation: none !important; will-change: auto; opacity: 0.7; } /* Disable Three.js starfield */ #threejs-starfield { display: none !important; } /* Simplify hero robot animation */ .hero-robot { animation: none !important; } } /* Particle Systems - Visible on Mobile */ @media (max-width: 768px) { .particles { opacity: 0.6; } .glow-particle { display: none; } .scanner-beam { display: none; } .nebula-layer, .shared-nebula { animation: none !important; opacity: 0.7; } .cyber-grid { opacity: 0.45; } } @media (max-width: 480px) { .cyber-grid { opacity: 0.35; background-size: 60px 60px; } .nebula-layer, .shared-nebula { opacity: 0.5; } } /* Parallax & Reveals - Simplify on Mobile */ @media (max-width: 768px) { [data-reveal] { transition-duration: 0.3s !important; } [data-reveal-stagger] > * { transition-delay: 0s !important; } .parallax-layer { transform: none !important; } } @media (max-width: 480px) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } } /* Animations - Reduce Complexity on Mobile */ @media (max-width: 768px) { .flow-node:hover, .stat-card:hover, .feature-card:hover, .space-map-sector:hover { transform: translateY(-2px) !important; } .btn-glow::before, .btn-hero.primary::before { display: none; } @keyframes titleGlow { from, to { text-shadow: 0 0 20px var(--accent-cyan-glow); } } .animated-icon::before { animation-duration: 3s !important; } } @media (max-width: 480px) { .animated-icon::before { animation: none !important; } .protection-flow { gap: 0.5rem; } .flow-node { padding: 0.75rem; min-width: 100px; } .flow-arrow { height: 20px; margin: 0; } } /* Lottie - Static Fallbacks on Mobile */ @media (max-width: 768px) { .lottie-icon lottie-player { width: 70% !important; height: 70% !important; } } @media (max-width: 480px) { .lottie-icon { display: none; } /* Show emoji fallback instead */ .lottie-icon + .emoji-fallback { display: inline-block; } } /* Interactive Elements - Touch-Friendly */ @media (max-width: 768px) { /* Larger touch targets */ .breach-card, .mission-step-btn, .sector-tab, .carousel-indicator { min-height: 48px; padding: 12px 16px; } /* Stack grids vertically */ .features-grid, .stats-grid, .platforms-grid, .benefits-list { grid-template-columns: 1fr !important; gap: 1rem; } /* Spacing for thumb reach */ .scanner-actions, .cta-buttons, .login-links { flex-direction: column; gap: 1rem; } /* Accordion behavior for complex sections */ .breach-carousel-container { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .breach-carousel-track { padding-bottom: 1rem; } } @media (max-width: 480px) { /* Collapse complex layouts */ .space-map { grid-template-columns: 1fr !important; } .space-map-sector { padding: 1rem; } .quick-compare { flex-direction: column; gap: 0.5rem; } /* Swipe hint visible */ .swipe-hint { display: block !important; font-size: 0.75rem; } /* Carousel navigation hidden (swipe instead) */ .breach-carousel-nav { display: none !important; } } /* Navigation - Mobile Hub Optimization */ /* Note: Main mobile bottom nav styles are defined in TOP_NAV section */ @media (max-width: 768px) { /* Hamburger menu and sidebar toggle - hidden since we use bottom nav */ .sidebar-nav { transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar-nav.open, .sidebar-nav.mobile-open { transform: translateX(0); } .hamburger-btn, .sidebar-toggle, .sidebar-overlay { display: none !important; visibility: hidden !important; } } /* Content Prioritization */ @media (max-width: 768px) { /* Progressive disclosure - collapse non-essential */ .demo-preview::before { display: none; } .tier-badge { font-size: 0.6rem; padding: 0.25rem 0.5rem; } /* Skeleton loading for dashboards */ .skeleton-loading { background: linear-gradient(90deg, rgba(100, 116, 139, 0.1) 25%, rgba(100, 116, 139, 0.2) 50%, rgba(100, 116, 139, 0.1) 75% ); background-size: 200% 100%; animation: skeletonShimmer 1.5s infinite; } @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } } @media (max-width: 480px) { /* Hide advanced features behind taps */ .ai-analysis-panel { max-height: 100px; overflow: hidden; position: relative; } .ai-analysis-panel::after { content: 'Tap to expand'; position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(transparent, rgba(15, 23, 42, 0.95)); text-align: center; color: var(--accent-cyan); font-size: 0.8rem; } .ai-analysis-panel.expanded { max-height: none; } .ai-analysis-panel.expanded::after { display: none; } } /* Performance - Critical Path Optimization */ @media (max-width: 768px) { /* Reduce paint complexity */ .enhanced-card::before, .scanner-interface::before, .login-card::before, .register-card::before { height: 2px; } /* Disable complex box shadows */ .tier-card:hover, .feature-card:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* Simplify gradients */ .cta-section::before { display: none; } } /* Focus visible for hub navigation */ .sector-tab:focus-visible, .flow-node:focus-visible, .breach-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } /* High contrast mode support */ @media (prefers-contrast: high) { .btn, .btn-hero { border: 2px solid currentColor; } .card, .enhanced-card, .tier-card { border-width: 2px; } } /* ===== PUBLIC PAGE MOBILE OPTIMIZATIONS ===== */ /* Sticky CTA Bar for Public Pages - DISABLED since we have mobile-logo-nav with Sign Up */ .mobile-sticky-cta { display: none !important; } @media (max-width: 768px) { .mobile-sticky-cta { display: block; position: fixed; bottom: 0; left: 0; right: 0; /* SOLID background - no transparency */ background: #0a0e17; background: linear-gradient(180deg, #0f172a 0%, #0a0e17 100%); border-top: 1px solid rgba(168, 213, 229, 0.3); padding: 0.75rem 1rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); z-index: 9999; /* Backdrop filter as enhancement only */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease; /* GPU acceleration for smooth scroll */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; /* Prevent layout shift */ contain: layout style; /* Extend below safe area to prevent white gap */ margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); } .mobile-sticky-cta.hidden { transform: translateY(100%) translateZ(0); } .sticky-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, #10b981, #059669); color: white; font-weight: 700; font-size: 1.1rem; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); transition: transform 0.2s, box-shadow 0.2s; /* Prevent text selection on tap */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .sticky-cta-btn:active { transform: scale(0.98); } .sticky-cta-btn .cta-icon { font-size: 1.3rem; } /* Add bottom padding to body for sticky CTA */ body:has(.mobile-sticky-cta) { padding-bottom: 80px; } /* Ensure html background is dark too */ html { background-color: #0a0e17 !important; } } /* Mobile Menu Toggle (Hamburger) */ .mobile-menu-toggle { display: none; } @media (max-width: 768px) { .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px; cursor: pointer; z-index: 1001; } .mobile-menu-toggle span { display: block; width: 100%; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all 0.3s ease; } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Nav Links - Hidden by default */ .mobile-nav-links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 14, 23, 0.98); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; transform: translateY(-100%); transition: transform 0.3s ease; z-index: 1000; } .mobile-nav-links.open { transform: translateY(0); } .mobile-nav-links a { font-size: 1.3rem; padding: 1rem 2rem; color: var(--text-primary); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s; } .mobile-nav-links a:hover, .mobile-nav-links a:focus { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); } } /* Swipe Hint for Horizontal Content */ .swipe-hint { display: none; } @media (max-width: 768px) { .swipe-hint { display: block; text-align: center; color: var(--text-muted); font-size: 0.75rem; padding: 0.5rem; opacity: 0.7; animation: swipeHintPulse 2s ease-in-out infinite; } @keyframes swipeHintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } /* Hide after first interaction */ .swipe-hint.dismissed { display: none; } } /* Mobile Hero Optimizations */ @media (max-width: 768px) { .mobile-hero { text-align: center; padding: 1.5rem 1rem; } .mobile-hero .hero-content { max-width: 100%; } .mobile-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; } .mobile-hero p { font-size: 1rem; } .mobile-priority-cta { width: 100%; padding: 1rem 1.5rem; font-size: 1.1rem; } } @media (max-width: 480px) { .mobile-hero { padding: 1rem 0.75rem; } .mobile-hero h1 { font-size: clamp(1.3rem, 5vw, 1.6rem); } } /* Tier Card Collapsible Features */ @media (max-width: 480px) { .tier-features.collapsible { max-height: 150px; overflow: hidden; position: relative; } .tier-features.collapsible::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, var(--bg-card)); pointer-events: none; } .tier-features.collapsible.expanded { max-height: none; } .tier-features.collapsible.expanded::after { display: none; } .tier-toggle-btn { display: block; width: 100%; padding: 0.75rem; background: rgba(168, 213, 229, 0.1); border: 1px solid rgba(168, 213, 229, 0.2); border-radius: 8px; color: var(--accent-cyan); font-size: 0.85rem; cursor: pointer; margin-top: 0.5rem; } } /* Mobile-Optimized Class Adjustments */ .mobile-optimized .flow-node:hover, .mobile-optimized .stat-card:hover, .mobile-optimized .feature-card:hover { transform: none !important; } .mobile-optimized .flow-node:active, .mobile-optimized .stat-card:active, .mobile-optimized .feature-card:active { transform: scale(0.98) !important; opacity: 0.9; } .mobile-optimized .btn-glow::before, .mobile-optimized .btn-hero.primary::before { display: none; } /* Flow Node Active State (Touch) */ .flow-node.active { border-color: var(--accent-cyan); background: rgba(168, 213, 229, 0.1); } .flow-node.active .flow-description { display: block; } /* Platform Sector Accordion (Mobile) */ @media (max-width: 480px) { .space-map-sector.expanded { background: rgba(168, 213, 229, 0.05); border-color: var(--accent-cyan); } } /* ===== PWA INSTALL PROMPT ===== */ .pwa-install-prompt { position: fixed; bottom: -120px; left: 1rem; right: 1rem; background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)); border: 1px solid rgba(168, 213, 229, 0.3); border-radius: 16px; padding: 1rem; z-index: 10000; transition: bottom 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); } .pwa-install-prompt.visible { bottom: max(1rem, env(safe-area-inset-bottom)); } .pwa-install-content { display: flex; align-items: center; gap: 1rem; } .pwa-icon { font-size: 2rem; flex-shrink: 0; } .pwa-text { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .pwa-text strong { color: var(--text-primary); font-size: 1rem; } .pwa-text span { color: var(--text-secondary); font-size: 0.85rem; } .pwa-install-btn { padding: 0.75rem 1.25rem; background: linear-gradient(135deg, var(--accent-cyan), #0891b2); color: #0a0e17; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .pwa-install-btn:hover { transform: scale(1.05); } .pwa-dismiss-btn { position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; background: rgba(100, 116, 139, 0.3); border: none; border-radius: 50%; color: var(--text-secondary); cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .pwa-update-notification { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #10b981, #059669); color: white; padding: 0.75rem 1.5rem; border-radius: 0 0 12px 12px; display: flex; align-items: center; gap: 1rem; z-index: 10001; transition: top 0.3s ease; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } .pwa-update-notification.visible { top: 0; } .pwa-update-notification button { padding: 0.5rem 1rem; background: white; color: #059669; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; } /* ===== A/B TESTING VARIANT STYLES ===== */ /* CTA Color Variants */ [data-ab-cta="cyan"] .sticky-cta-btn, [data-ab-cta="cyan"] .btn-hero.primary, [data-ab-cta="cyan"] .register-btn { background: var(--ab-cta-color, linear-gradient(135deg, #A8D5E5, #0891b2)); color: #0a0e17; } [data-ab-cta="gradient"] .sticky-cta-btn, [data-ab-cta="gradient"] .btn-hero.primary, [data-ab-cta="gradient"] .register-btn { background: var(--ab-cta-color, linear-gradient(135deg, #10b981, #a78bfa)); } /* Hero Layout Variants */ [data-ab-hero="centered"] .hero, [data-ab-hero="centered"] .hero-section { text-align: center; } [data-ab-hero="centered"] .hero-content { max-width: 700px; margin: 0 auto; } /* Split layout removed - always use centered vertical stack */ /* Nav Style Variants (Mobile Only) */ @media (max-width: 768px) { [data-ab-nav="hamburger-only"] .mobile-sticky-cta { display: none !important; } [data-ab-nav="hamburger-only"] .mobile-menu-toggle { display: flex !important; } } /* Offline Indicator */ .offline-indicator { position: fixed; top: 0; left: 0; right: 0; background: #ef4444; color: white; text-align: center; padding: 0.5rem; font-size: 0.85rem; z-index: 10002; transform: translateY(-100%); transition: transform 0.3s ease; } .offline-indicator.visible { transform: translateY(0); } /* Network-disabled state for offline mode */ .network-disabled { opacity: 0.5; pointer-events: none; position: relative; } .network-disabled::after { content: 'Requires connection'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15, 23, 42, 0.9); color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; white-space: nowrap; } .is-offline .requires-network-hide { display: none !important; } /* ===== GLOSSARY TOOLTIP SYSTEM ===== */ .glossary-term { border-bottom: 1px dotted var(--accent-cyan); cursor: help; transition: all 0.2s; position: relative; } .glossary-term:hover, .glossary-term:focus { color: var(--accent-cyan); background: rgba(168, 213, 229, 0.1); border-radius: 2px; } .glossary-tooltip { position: absolute; width: 300px; max-width: calc(100vw - 40px); background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(168, 213, 229, 0.3); border-radius: 12px; padding: 1rem; z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s ease; backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .glossary-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0); } .tooltip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .tooltip-term { font-family: 'Exo 2', sans-serif; font-size: 0.9rem; color: var(--accent-cyan); font-weight: 600; } .tooltip-close { background: none; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; padding: 0; line-height: 1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.2s; } .tooltip-close:hover { background: rgba(100, 116, 139, 0.2); color: var(--text-primary); } .tooltip-simple { font-size: 1rem; color: var(--text-primary); margin: 0 0 0.5rem 0; font-weight: 600; line-height: 1.4; } .tooltip-detailed { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } @media (max-width: 480px) { .glossary-tooltip { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; padding: 1.25rem; transform: translateY(100%); } .glossary-tooltip.visible { transform: translateY(0); } } /* ===== SPRINT 2: BATCH ACTIONS SYSTEM ===== */ .batch-select-all-toggle { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: rgba(168, 213, 229, 0.05); border: 1px solid rgba(168, 213, 229, 0.1); border-radius: 10px; margin-bottom: 1rem; } .select-all-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.95rem; color: var(--text-primary); } .select-all-label input[type="checkbox"] { display: none; } .custom-checkbox { width: 22px; height: 22px; border: 2px solid rgba(100, 116, 139, 0.5); border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: var(--bg-card); } .select-all-label input:checked + .custom-checkbox { background: var(--accent-cyan); border-color: var(--accent-cyan); } .select-all-label input:checked + .custom-checkbox::after { content: '✓'; color: #0a0e17; font-weight: bold; font-size: 0.8rem; } .select-all-label input:indeterminate + .custom-checkbox::after { content: '−'; color: var(--accent-cyan); font-weight: bold; font-size: 1rem; } .batch-hint { font-size: 0.8rem; color: var(--text-muted); } .batch-checkbox { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; cursor: pointer; } .batch-checkbox input[type="checkbox"] { display: none; } .batch-checkbox .custom-checkbox { width: 20px; height: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .breach-card { position: relative; } .breach-card.batch-selected { outline: 2px solid var(--accent-cyan); outline-offset: 2px; background: rgba(168, 213, 229, 0.05); } .batch-actions-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120px); background: rgba(15, 23, 42, 0.98); border: 1px solid var(--accent-cyan); border-radius: 16px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; z-index: 1000; backdrop-filter: blur(15px); box-shadow: 0 10px 40px rgba(168, 213, 229, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .batch-actions-bar.visible { transform: translateX(-50%) translateY(0); } .batch-info { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--text-secondary); } .batch-icon { font-size: 1.2rem; } .batch-count { font-weight: 700; color: var(--accent-cyan); font-size: 1.1rem; } .batch-buttons { display: flex; gap: 0.75rem; } .batch-btn { padding: 0.6rem 1.25rem; border: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .batch-btn.primary { background: linear-gradient(135deg, var(--accent-cyan), #0891b2); color: #0a0e17; } .batch-btn:not(.primary):not(.secondary) { background: rgba(100, 116, 139, 0.3); color: var(--text-primary); } .batch-btn.secondary { background: rgba(239, 68, 68, 0.2); color: #f87171; } .batch-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Batch Modal */ .batch-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity 0.3s; } .batch-modal-overlay.visible { opacity: 1; } .batch-modal { background: var(--bg-card); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 20px; padding: 2rem; width: 420px; max-width: 90vw; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); } .batch-modal h3 { margin: 0 0 1.5rem 0; font-family: 'Exo 2', sans-serif; font-size: 1.3rem; color: var(--text-primary); } .batch-progress-bar { height: 10px; background: rgba(100, 116, 139, 0.3); border-radius: 5px; overflow: hidden; margin-bottom: 1rem; } .batch-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-cyan), #10b981); border-radius: 5px; transition: width 0.3s ease; } .batch-progress-text { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1rem; } .batch-progress-list { max-height: 180px; overflow-y: auto; text-align: left; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px; } .batch-progress-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; font-size: 0.85rem; border-radius: 4px; } .batch-progress-item.success { color: #10b981; } .batch-progress-item.error { color: #f87171; } .batch-completion-stats { display: flex; justify-content: center; gap: 3rem; margin: 1.5rem 0; } .batch-stat { text-align: center; } .batch-stat .stat-value { display: block; font-size: 2.5rem; font-weight: 700; font-family: 'Exo 2', sans-serif; } .batch-stat.success .stat-value { color: #10b981; } .batch-stat.error .stat-value { color: #f87171; } .batch-stat .stat-label { font-size: 0.85rem; color: var(--text-secondary); } .batch-completion-note { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1.5rem; } .batch-modal-close { padding: 0.875rem 2rem; background: linear-gradient(135deg, var(--accent-cyan), #0891b2); color: #0a0e17; border: none; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s; } .batch-modal-close:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 213, 229, 0.3); } /* Batch Toast */ .batch-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 0.875rem 1.5rem; border-radius: 10px; font-weight: 600; z-index: 10001; opacity: 0; transition: all 0.3s; } .batch-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .batch-toast.success { background: rgba(16, 185, 129, 0.95); color: white; } .batch-toast.error { background: rgba(239, 68, 68, 0.95); color: white; } /* ===== SPRINT 2: SEARCH & FILTER SYSTEM ===== */ .breach-search-container { margin-bottom: 1.25rem; } .search-row { margin-bottom: 0.75rem; } .search-input-wrapper { position: relative; } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: 0.6; } #breach-search-input { width: 100%; padding: 0.875rem 3rem 0.875rem 3rem; background: var(--bg-card); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; color: var(--text-primary); font-size: 1rem; font-family: inherit; transition: all 0.2s; } #breach-search-input::placeholder { color: var(--text-muted); } #breach-search-input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-glow); } .search-clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: rgba(100, 116, 139, 0.3); border: none; border-radius: 50%; width: 24px; height: 24px; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .search-clear:hover { background: rgba(239, 68, 68, 0.3); color: #f87171; } .filter-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .filter-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .filter-btn { padding: 0.5rem 1rem; background: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.25); border-radius: 20px; color: var(--text-secondary); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.4rem; } .filter-btn:hover { background: rgba(100, 116, 139, 0.25); border-color: rgba(100, 116, 139, 0.4); } .filter-btn.active { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #0a0e17; font-weight: 600; } .filter-count { background: rgba(0, 0, 0, 0.2); padding: 0.1rem 0.4rem; border-radius: 10px; font-size: 0.75rem; } .filter-btn.active .filter-count { background: rgba(255, 255, 255, 0.3); } .sort-dropdown select { padding: 0.5rem 2rem 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; } .sort-dropdown select:focus { outline: none; border-color: var(--accent-cyan); } .search-results-info { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: rgba(168, 213, 229, 0.05); border-radius: 8px; font-size: 0.9rem; color: var(--text-secondary); } #search-results-count { font-weight: 700; color: var(--accent-cyan); } .clear-filters-btn { margin-left: auto; padding: 0.35rem 0.75rem; background: rgba(100, 116, 139, 0.2); border: none; border-radius: 6px; color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; } .clear-filters-btn:hover { background: rgba(239, 68, 68, 0.2); color: #f87171; } .breach-card.filtered-out { display: none !important; } /* ===== SPRINT 2: QUICK FIX MODE ===== */ .view-mode-toggle { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(100, 116, 139, 0.2); } .toggle-label { font-size: 0.85rem; color: var(--text-muted); margin-right: 0.5rem; } .mode-btn { padding: 0.5rem 1rem; background: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.25); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: all 0.2s; } .mode-btn:hover { background: rgba(100, 116, 139, 0.25); } .mode-btn.active { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #0a0e17; font-weight: 600; } /* Quick Fix Card Overlay */ .breach-card.quick-fix-mode { position: relative; } .quick-fix-overlay { position: absolute; inset: 0; background: rgba(10, 14, 23, 0.95); border-radius: inherit; display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 4; } .quick-fix-content { text-align: center; width: 100%; } .quick-action-label { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.5rem 0; } .quick-action-text { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1.25rem 0; } .quick-fix-buttons { display: flex; gap: 0.75rem; justify-content: center; } .quick-btn { padding: 0.75rem 1.5rem; border: none; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.25s var(--ease-smooth); text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1); } .quick-btn.primary { background: linear-gradient(135deg, var(--accent-cyan), #0891b2); color: #0a0e17; box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 15px rgba(168,213,229,0.2), inset 0 1px 0 rgba(255,255,255,0.2); } .quick-btn.secondary { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 10px rgba(16,185,129,0.1); } .quick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 25px rgba(168,213,229,0.2); } .quick-btn.primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 30px rgba(168,213,229,0.3), inset 0 1px 0 rgba(255,255,255,0.25); } .quick-btn.secondary:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 20px rgba(16,185,129,0.2); border-color: rgba(16,185,129,0.5); } .quick-btn.completed { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 15px rgba(16,185,129,0.25), inset 0 1px 0 rgba(255,255,255,0.15); } .breach-card.quick-fixed .quick-fix-overlay { background: rgba(16, 185, 129, 0.15); } /* Mobile Responsive for Sprint 2 */ @media (max-width: 768px) { .batch-actions-bar { left: 1rem; right: 1rem; transform: translateX(0) translateY(120px); flex-direction: column; gap: 0.75rem; padding: 1rem; bottom: 80px; /* Above mobile nav */ } .batch-actions-bar.visible { transform: translateX(0) translateY(0); } .batch-buttons { width: 100%; justify-content: center; } .batch-select-all-toggle { flex-direction: column; gap: 0.5rem; text-align: center; } .batch-hint { display: none; } .filter-row { flex-direction: column; align-items: stretch; } .filter-buttons { justify-content: center; } .sort-dropdown { width: 100%; } .sort-dropdown select { width: 100%; } } @media (max-width: 480px) { .batch-btn { padding: 0.5rem 1rem; font-size: 0.85rem; } .filter-btn { padding: 0.4rem 0.75rem; font-size: 0.8rem; } .quick-fix-buttons { flex-direction: column; } .quick-btn { width: 100%; } } * { box-sizing: border-box; } /* Focus styles for accessibility */ *:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } body { font-family: 'Inter', sans-serif; font-weight: 500; /* Transparent so cyber-bg shows through */ background: transparent; color: var(--text-primary); margin: 0; padding: 20px; min-height: 100vh; min-height: var(--safe-vh, 100vh); /* Use calculated safe height */ font-size: clamp(15px, 1rem, 18px); line-height: 1.6; letter-spacing: 0.3px; overflow-x: hidden; } @media (max-width: 768px) { body { padding: 0; } } /* ============================================================================= PRODUCTION CYBER BACKGROUND - Enhanced Quality Multi-layer depth system with subtle animations ============================================================================= */ .cyber-bg { position: fixed; inset: 0; z-index: -4; pointer-events: none; /* Rich multi-layer gradient with depth */ background: /* Subtle vignette effect */ radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%), /* Primary cyan glow - top left */ radial-gradient(ellipse 80% 50% at 15% 20%, rgba(168, 213, 229, 0.12) 0%, transparent 50%), /* Secondary purple glow - bottom right */ radial-gradient(ellipse 70% 60% at 85% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 50%), /* Tertiary blue accent - center right */ radial-gradient(ellipse 50% 40% at 90% 40%, rgba(96, 165, 250, 0.06) 0%, transparent 40%), /* Deep space gradient base */ linear-gradient(180deg, #080c14 0%, #0a0e17 15%, #0f1729 35%, #1a1f2e 50%, #0f1729 65%, #0a0e17 85%, #080c14 100% ); background-color: #0a0e17; } /* Animated nebula layer for depth */ .cyber-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 80% at 30% 60%, rgba(168, 213, 229, 0.04) 0%, transparent 50%), radial-gradient(ellipse 80% 100% at 70% 30%, rgba(139, 92, 246, 0.03) 0%, transparent 50%); animation: nebulaShift 20s ease-in-out infinite alternate; opacity: 0.8; } /* Subtle star field overlay */ .cyber-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(168, 213, 229, 0.3) 0%, transparent 100%), radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 100%), radial-gradient(1px 1px at 60% 20%, rgba(167, 139, 250, 0.25) 0%, transparent 100%), radial-gradient(1px 1px at 80% 50%, rgba(168, 213, 229, 0.2) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 10% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 100%), radial-gradient(1px 1px at 90% 10%, rgba(96, 165, 250, 0.2) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 50% 50%, rgba(168, 213, 229, 0.1) 0%, transparent 100%), radial-gradient(1px 1px at 30% 90%, rgba(139, 92, 246, 0.15) 0%, transparent 100%), radial-gradient(1px 1px at 70% 85%, rgba(255, 255, 255, 0.1) 0%, transparent 100%), radial-gradient(1px 1px at 15% 45%, rgba(168, 213, 229, 0.2) 0%, transparent 100%); animation: starTwinkle 8s ease-in-out infinite; } @keyframes nebulaShift { 0% { opacity: 0.6; transform: scale(1) translate(0, 0); } 100% { opacity: 0.9; transform: scale(1.05) translate(10px, -10px); } } @keyframes starTwinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Enhanced cyber grid with perspective */ .cyber-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; /* Finer grid with subtle glow */ background-image: /* Horizontal lines */ linear-gradient(rgba(168, 213, 229, 0.035) 1px, transparent 1px), /* Vertical lines */ linear-gradient(90deg, rgba(168, 213, 229, 0.035) 1px, transparent 1px), /* Larger grid overlay for depth */ linear-gradient(rgba(168, 213, 229, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 213, 229, 0.02) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 120px 120px, 120px 120px; /* Perspective fade at bottom */ -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100% ); mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100% ); animation: gridPulse 12s ease-in-out infinite; } /* Grid glow effect layer */ .cyber-grid::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(168, 213, 229, 0.08) 0%, transparent 50%); animation: gridGlow 8s ease-in-out infinite alternate; } @keyframes gridPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.7; } } @keyframes gridGlow { 0% { opacity: 0.3; transform: translateY(0); } 100% { opacity: 0.6; transform: translateY(-20px); } } /* Floating particles layer */ .particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .particle { position: absolute; width: 3px; height: 3px; background: var(--accent-cyan); border-radius: 50%; opacity: 0; animation: particleFloat 12s infinite ease-in-out; box-shadow: 0 0 6px var(--accent-cyan-glow); } @keyframes particleFloat { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.4; } 100% { transform: translateY(-100px) scale(1); opacity: 0; } } /* Subtle CRT scanlines for retro depth */ .scanlines { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.015) 2px, rgba(0,0,0,0.015) 4px ); opacity: 0.4; } /* Optional: Nebula accent layer */ .nebula-layer { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 25% 25%, rgba(168, 213, 229, 0.06) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 75% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 60%); animation: nebulaBreath 15s ease-in-out infinite alternate; opacity: 0.7; } @keyframes nebulaBreath { 0% { transform: scale(1); filter: blur(0px); } 100% { transform: scale(1.02); filter: blur(1px); } } .container { max-width: 900px; margin: 0 auto; text-align: center; padding: 0 16px; } h1 { font-family: 'Exo 2', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--accent-cyan); text-shadow: 0 0 30px var(--accent-cyan-glow), 0 0 60px rgba(168,213,229,0.15), 0 2px 4px rgba(0,0,0,0.3); margin-bottom: 0.5rem; letter-spacing: 2px; } h2 { font-family: 'Exo 2', sans-serif; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; color: var(--text-primary); letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } h3 { font-family: 'Exo 2', sans-serif; font-size: 1.1rem; font-weight: 500; color: var(--accent-cyan); text-shadow: 0 0 15px rgba(168,213,229,0.2); } .subtitle { color: var(--text-secondary); margin-bottom: 2rem; font-size: clamp(1rem, 2.5vw, 1.15rem); } a { color: var(--accent-cyan); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--accent-cyan-dark); text-shadow: 0 0 10px var(--accent-cyan-glow); } .card { background: linear-gradient(145deg, var(--bg-card) 0%, rgba(15,23,42,0.98) 100%); padding: 2rem; border-radius: 16px; border: 1px solid rgba(168, 213, 229, 0.2); box-shadow: 0 4px 25px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.03); margin: 2rem auto; max-width: 100%; width: 100%; transition: var(--transition); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; z-index: 2; } .card:hover { border-color: var(--accent-cyan); box-shadow: 0 8px 40px rgba(168,213,229,0.15), 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); transform: translateY(-3px); } .breach-card { background: linear-gradient(145deg, rgba(26,31,46,0.95) 0%, rgba(15,23,42,0.98) 100%); padding: 1.75rem; margin: 1.5rem auto; border-radius: 16px; border: 1px solid rgba(239, 68, 68, 0.35); box-shadow: 0 0 20px var(--danger-glow), 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(239,68,68,0.1); max-width: 100%; width: 100%; text-align: left; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--transition); position: relative; z-index: 2; } .breach-card:hover { box-shadow: 0 0 35px var(--danger-glow), 0 8px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(239,68,68,0.15); transform: translateY(-2px); } input, select { padding: 14px 18px; width: 100%; max-width: 450px; border: 1.5px solid rgba(168, 213, 229, 0.25); border-radius: 10px; background: linear-gradient(145deg, rgba(10, 14, 23, 0.9) 0%, rgba(15, 23, 42, 0.85) 100%); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; margin: 10px 0; box-sizing: border-box; transition: var(--transition-fast); box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 3px rgba(0,0,0,0.1); } input:focus, select:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-subtle), 0 0 20px var(--accent-cyan-glow), inset 0 1px 3px rgba(0,0,0,0.1); } input::placeholder { color: var(--text-muted); } label { display: block; text-align: left; margin-bottom: 6px; font-weight: 600; color: var(--text-primary); } .btn, input[type="submit"].btn { padding: 14px 32px; background: linear-gradient(145deg, var(--accent-cyan) 0%, var(--accent-cyan-dark) 100%); color: #0a0e17; border: none; border-radius: 10px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 20px var(--accent-cyan-glow), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; text-align: center; cursor: pointer; white-space: nowrap; will-change: transform, box-shadow; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn:hover, input[type="submit"].btn:hover { background: linear-gradient(145deg, var(--accent-cyan-dark) 0%, var(--accent-cyan) 100%); box-shadow: 0 0 30px var(--accent-cyan-glow), 0 8px 25px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.1); transform: translateY(-3px); } .btn:active { transform: translateY(-1px); box-shadow: 0 2px 15px var(--accent-cyan-glow), 0 4px 15px rgba(0,0,0,0.2); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Secondary/Ghost Button Style */ .btn-secondary, .btn-ghost { background: transparent; border: 2px solid var(--accent-cyan); color: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan-glow); } .btn-secondary:hover, .btn-ghost:hover { background: rgba(168,213,229,0.1); box-shadow: 0 0 25px var(--accent-cyan-glow); } /* Danger Button */ .btn-danger { background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 4px 20px var(--danger-glow); } .btn-danger:hover { background: linear-gradient(145deg, #dc2626 0%, #ef4444 100%); box-shadow: 0 0 30px var(--danger-glow); } .alert { padding: 1.25rem 1.5rem; border-radius: 12px; margin: 1rem auto; max-width: 100%; width: 100%; font-size: 1rem; line-height: 1.5; border-left: 4px solid; opacity: 0; animation: fadeIn 0.5s forwards; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @keyframes fadeIn { to { opacity: 1; } } .alert.success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%); color: #dcfce7; border-color: var(--success); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15); } .alert.error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.08) 100%); color: #fca5a5; border-color: var(--danger); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15); } /* Flash message auto-dismissal animation */ .alert.flash-fade-out { animation: flashFadeOut 0.4s ease-out forwards !important; } @keyframes flashFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } .insight { font-style: italic; color: #a5b4fc; margin-top: 10px; font-size: 1rem; line-height: 1.6; word-wrap: break-word; } .footer { margin-top: 4rem; font-size: 0.9rem; color: var(--text-secondary); text-align: center; width: 100%; padding: 1rem 0; line-height: 1.6; } .footer a { color: var(--accent-cyan); text-decoration: none; } .footer a:hover { text-decoration: underline; } .progress-bar { background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.8) 100%); border-radius: 9999px; height: 12px; overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.03); border: 1px solid rgba(100,116,139,0.15); } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-cyan-dark), var(--accent-cyan)); background-size: 200% 100%; animation: progressGradient 2s linear infinite; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 20px var(--accent-cyan-glow), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.2); position: relative; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: progressShine 2s ease-in-out infinite; } @keyframes progressGradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .security-scorecard { border-left: 5px solid var(--accent-cyan); background: var(--accent-cyan-subtle); } .metric-card { background: linear-gradient(145deg, var(--bg-card) 0%, rgba(15,23,42,0.9) 100%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; border: 1px solid rgba(100,116,139,0.15); box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .metric-card:hover { transform: scale(1.03) translateY(-2px); box-shadow: 0 8px 25px rgba(168,213,229,0.15), 0 4px 15px rgba(0,0,0,0.25); border-color: rgba(168,213,229,0.25); } .progress-bar.small { height: 10px; } .scorecard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .badge-card:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,215,0,0.4); } @media (max-width: 768px) { h1 { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .card, .breach-card { padding: 1.5rem; margin: 1.5rem auto; } .alert { padding: 1rem; font-size: 0.95rem; } .insight { font-size: 0.95rem; } .footer { font-size: 0.85rem; margin-top: 3rem; padding: 1rem; } input, select { padding: 13px 15px; font-size: 0.95rem; max-width: 100%; } .btn { padding: 12px 24px; font-size: 1rem; min-width: 140px; margin: 6px; } .grid-container { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } @media (max-width: 480px) { h1 { font-size: 2rem; } .subtitle { font-size: 0.95rem; } .card, .breach-card { padding: 1.2rem; margin: 1rem auto; } .alert { padding: 0.8rem; font-size: 0.9rem; } .insight { font-size: 0.9rem; line-height: 1.5; } .footer { font-size: 0.8rem; margin-top: 2.5rem; padding: 0.8rem; line-height: 1.5; } input, select { padding: 12px 14px; font-size: 1rem; max-width: 100%; margin: 12px 0; } .btn { padding: 12px 20px; font-size: 0.95rem; width: 100%; max-width: 300px; margin: 8px 0; min-width: auto; } .grid-container { grid-template-columns: 1fr; } label { flex-direction: column; align-items: flex-start; overflow: hidden; text-overflow: ellipsis; min-width: auto; } } .rank-badge { display: inline-block; padding: 10px 20px; border-radius: 25px; font-weight: bold; text-transform: uppercase; margin: 10px 0; font-family: 'Exo 2', sans-serif; letter-spacing: 1px; position: relative; overflow: hidden; cursor: default; } .rank-unverified { background: linear-gradient(135deg, #6b7280, #4b5563); border: 2px solid #6b7280; box-shadow: 0 0 10px rgba(107, 114, 128, 0.4); color: #d1d5db; } .rank-verified { background: linear-gradient(135deg, #10b981, #059669); border: 2px solid #10b981; box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); color: #ffffff; } .rank-pro { background: linear-gradient(135deg, #3b82f6, #1d4ed8, #3b82f6); background-size: 200% 200%; border: 2px solid #60a5fa; box-shadow: 0 0 25px rgba(59, 130, 246, 0.7), 0 0 50px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(255,255,255,0.1); color: #ffffff; transition: transform 0.15s ease-out, box-shadow 0.3s ease; transform-style: preserve-3d; animation: proIdleShimmer 8s ease-in-out infinite; } .rank-pro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.5) 0%, rgba(120,180,255,0.3) 20%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .rank-pro::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.15) 35%, rgba(120,180,255,0.25) 42%, rgba(255,255,255,0.15) 48%, transparent 65%); background-size: 250% 100%; background-position: var(--bg-pos, 100%) 50%; pointer-events: none; mix-blend-mode: overlay; transition: background-position 0.1s ease; } .rank-pro:hover { animation: none; box-shadow: 0 0 40px rgba(59, 130, 246, 0.95), 0 0 80px rgba(59, 130, 246, 0.5), inset 0 0 30px rgba(255,255,255,0.2); } .rank-pro:hover::before { opacity: 1; } .rank-elite { background: linear-gradient(135deg, #f59e0b, #d97706, #fbbf24, #f59e0b); background-size: 300% 300%; border: 2px solid #fbbf24; box-shadow: 0 0 30px rgba(245, 158, 11, 0.8), 0 0 60px rgba(255, 215, 0, 0.4), inset 0 0 25px rgba(255,255,255,0.15); color: #0a0e17; transition: transform 0.15s ease-out, box-shadow 0.3s ease; transform-style: preserve-3d; animation: eliteIdleShimmer 6s ease-in-out infinite; } .rank-elite::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.6) 0%, rgba(255,215,0,0.4) 15%, rgba(255,180,0,0.2) 30%, transparent 55%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .rank-elite::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 10%, rgba(255,255,255,0.2) 25%, rgba(255,215,0,0.35) 35%, rgba(255,180,50,0.25) 45%, rgba(255,255,255,0.2) 55%, transparent 75%); background-size: 250% 100%; background-position: var(--bg-pos, 100%) 50%; pointer-events: none; mix-blend-mode: overlay; transition: background-position 0.1s ease; } .rank-elite:hover { animation: none; box-shadow: 0 0 50px rgba(245, 158, 11, 1), 0 0 100px rgba(255, 215, 0, 0.7), inset 0 0 35px rgba(255,255,255,0.25); } .rank-elite:hover::before { opacity: 1; } @keyframes proIdleShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes eliteIdleShimmer { 0%, 100% { background-position: 0% 50%; box-shadow: 0 0 30px rgba(245, 158, 11, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); } 50% { background-position: 100% 50%; box-shadow: 0 0 38px rgba(245, 158, 11, 0.9), 0 0 75px rgba(255, 215, 0, 0.5); } } .credits-section { display: flex; align-items: center; justify-content: center; gap: 10px; } .add-credits-btn { padding: 5px 10px; font-size: 1.2rem; background: #10b981; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: white; box-shadow: 0 2px 10px rgba(16,185,129,0.5); transition: transform 0.2s; } .add-credits-btn:hover { transform: scale(1.1); } .notification-bell { position: relative; cursor: pointer; padding: 8px 12px !important; } .notification-count { position: absolute; top: 2px; right: 2px; background: #ef4444; color: white; font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 10px; min-width: 16px; text-align: center; box-shadow: 0 0 8px rgba(239,68,68,0.5); } .notification-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: rgba(10,14,23,0.98); border: 1px solid var(--accent-cyan); border-radius: 10px; padding: 8px 0; z-index: 200; max-height: 350px; overflow-y: auto; width: 340px; box-shadow: 0 0 30px var(--accent-cyan-glow), 0 10px 40px rgba(0,0,0,0.5); } .notification-item { padding: 12px 16px; border-bottom: 1px solid rgba(168,213,229,0.1); text-align: left; font-size: 0.9rem; line-height: 1.4; transition: all 0.15s ease; position: relative; } .notification-item:hover { background: rgba(168,213,229,0.08); } .notification-item.unread { background: rgba(168,213,229,0.12); border-left: 3px solid var(--accent-cyan); } .notification-item:last-child { border-bottom: none; } a.notification-item { cursor: pointer; text-decoration: none; color: inherit; display: block; padding-right: 32px; } a.notification-item::after { content: '→'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--accent-cyan); opacity: 0.5; font-size: 1rem; transition: all 0.15s ease; } a.notification-item:hover { background: rgba(168,213,229,0.18); transform: translateX(3px); } a.notification-item:hover::after { opacity: 1; right: 8px; } .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-elevated); padding: 20px; border-radius: 16px; box-shadow: var(--shadow-cyan); z-index: 200; text-align: center; max-width: 80%; width: 400px; border: 1px solid var(--accent-cyan); } .popup.active { display: block; } .close-popup { background: #ef4444; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; } .flashy-text { color: var(--accent-cyan); text-shadow: 0 0 20px var(--accent-cyan-glow); } .feature-card { opacity: 0; animation: fade-in-up 0.5s ease-out forwards; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-group { margin-bottom: 20px; text-align: left; } .grid-label:hover { background: var(--accent-cyan-subtle) !important; } .pulse-glow { box-shadow: 0 0 20px var(--danger-glow); } .mission-resolved { background: rgba(74,222,128,0.15) !important; border-left: 4px solid #4ade80 !important; } .mission-resolved strong { color: #4ade80 !important; } .toast { position: fixed; top: 20px; right: 20px; background: rgba(34,197,94,0.95); color: white; padding: 16px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 1000; opacity: 0; animation: toastIn 0.5s forwards, toastOut 0.5s 4.5s forwards; } .toast.error { background: rgba(239, 68, 68, 0.95); } .toast.success { background: rgba(34, 197, 94, 0.95); } .toast.info { background: rgba(59, 130, 246, 0.95); } @keyframes toastIn { to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { to { opacity: 0; transform: translateY(-20px); } } /* Enhanced Form Validation Feedback */ .form-input-wrapper { position: relative; } .form-input-wrapper input:valid:not(:placeholder-shown) { border-color: var(--success); } .form-input-wrapper input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--danger); } .validation-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .form-input-wrapper input:valid:not(:placeholder-shown) + .validation-icon.valid { opacity: 1; } .form-input-wrapper input:invalid:not(:placeholder-shown):not(:focus) + .validation-icon.invalid { opacity: 1; } .validation-icon.valid { color: var(--success); } .validation-icon.invalid { color: var(--danger); } /* Inline Form Hints */ .form-hint { font-size: 0.8rem; color: #64748b; margin-top: 4px; display: flex; align-items: center; gap: 6px; } .form-hint.error { color: #ef4444; } .form-hint.success { color: #10b981; } /* Completion Progress Bar */ .completion-progress { margin: 1rem 0 1.5rem; } .completion-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .completion-progress-label { font-size: 0.85rem; color: #94a3b8; } .completion-progress-value { font-size: 0.9rem; color: var(--accent-cyan); font-weight: 600; } .completion-progress-bar { height: 8px; background: rgba(100,116,139,0.2); border-radius: 4px; overflow: hidden; } .completion-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-cyan), var(--success)); border-radius: 4px; transition: width 0.5s ease-out; position: relative; } .completion-progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: progressShine 2s infinite; } @keyframes progressShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Breadcrumbs */ .breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 1.5rem; font-size: 0.85rem; flex-wrap: wrap; } .breadcrumb-item { color: #64748b; transition: color 0.2s; } .breadcrumb-item a { color: #64748b; text-decoration: none; } .breadcrumb-item a:hover { color: var(--accent-cyan); } .breadcrumb-separator { color: #475569; } .breadcrumb-item.current { color: var(--text-primary); font-weight: 500; } /* ===== SIDEBAR NAVIGATION ===== */ /* Sidebar Toggle Button */ .sidebar-toggle { position: fixed; left: 16px; top: 16px; z-index: 1001; background: rgba(15,23,42,0.95); border: 1px solid rgba(100,116,139,0.3); border-radius: 10px; padding: 10px 14px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; transition: all 0.3s; backdrop-filter: blur(10px); } .sidebar-toggle:hover { border-color: var(--accent-cyan); box-shadow: 0 0 15px var(--accent-cyan-glow); } .sidebar-toggle-icon { font-size: 1.2rem; transition: transform 0.3s; } .sidebar-toggle.active .sidebar-toggle-icon { transform: rotate(90deg); } /* Sidebar Navigation - Collapsible */ .sidebar-nav { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(10,14,23,0.98)); border-right: 1px solid rgba(100,116,139,0.2); z-index: 1000; transition: all 0.3s ease; display: flex; flex-direction: column; backdrop-filter: blur(20px); } .sidebar-nav.collapsed { width: 70px; } .sidebar-nav.mobile-hidden { transform: translateX(-100%); } .sidebar-nav.mobile-open { transform: translateX(0); } .sidebar-header { padding: 8px 12px; border-bottom: 1px solid rgba(100,116,139,0.2); display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; } .sidebar-logo-icon { height: 100px; width: auto; flex-shrink: 0; margin: -4px 0; } .sidebar-nav.collapsed .sidebar-logo-icon { height: 50px; } .sidebar-brand { font-family: 'Exo 2', sans-serif; font-size: 1.1rem; color: var(--accent-cyan); font-weight: 700; transition: opacity 0.2s, width 0.3s; } .sidebar-nav.collapsed .sidebar-brand { opacity: 0; width: 0; } /* Collapse Toggle Button */ .sidebar-collapse-btn { position: absolute; right: -12px; top: 24px; width: 24px; height: 24px; background: rgba(15,23,42,0.95); border: 1px solid rgba(100,116,139,0.3); border-radius: 50%; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: all 0.2s; z-index: 1002; } .sidebar-collapse-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); } .sidebar-nav.collapsed .sidebar-collapse-btn { transform: rotate(180deg); } .sidebar-menu { flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden; } .sidebar-menu::-webkit-scrollbar { width: 6px; } .sidebar-menu::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.4); } .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.4); border-radius: 3px; } .sidebar-menu::-webkit-scrollbar-thumb:hover { background: rgba(168, 213, 229, 0.4); } .sidebar-section { padding: 0 12px; margin-bottom: 8px; } .sidebar-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; padding: 8px 12px; font-weight: 600; white-space: nowrap; transition: opacity 0.2s; } .sidebar-nav.collapsed .sidebar-section-title { opacity: 0; height: 0; padding: 0; margin: 0; } /* Collapsible sidebar sections */ .sidebar-section-collapse { border: none; background: none; margin-bottom: 4px; } .sidebar-section-collapse summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; transition: background 0.2s; } .sidebar-section-collapse summary::-webkit-details-marker { display: none; } .sidebar-section-collapse summary:hover { background: rgba(168, 213, 229, 0.05); } .sidebar-section-collapse summary .section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; font-weight: 600; } .sidebar-section-collapse summary .section-toggle { width: 16px; height: 16px; color: #64748b; transition: transform 0.2s; } .sidebar-section-collapse[open] summary .section-toggle { transform: rotate(180deg); } .sidebar-section-collapse .section-links { padding-top: 4px; } .sidebar-nav.collapsed .sidebar-section-collapse summary .section-title { opacity: 0; width: 0; } .sidebar-nav.collapsed .sidebar-section-collapse summary .section-toggle { display: none; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: #94a3b8; text-decoration: none; border-radius: 12px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); margin: 5px 0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; position: relative; border: 1px solid transparent; } .sidebar-link:hover { background: linear-gradient(135deg, rgba(168,213,229,0.12) 0%, rgba(168,213,229,0.06) 100%); color: var(--text-primary); border-color: rgba(168,213,229,0.2); box-shadow: 0 2px 12px rgba(168,213,229,0.1); } .sidebar-link.active { background: linear-gradient(135deg, rgba(168,213,229,0.18) 0%, rgba(96,165,250,0.12) 100%); color: var(--accent-cyan); border-left: 3px solid var(--accent-cyan); border-color: rgba(168,213,229,0.25); box-shadow: 0 2px 15px rgba(168,213,229,0.15), inset 0 1px 0 rgba(255,255,255,0.05); } .sidebar-link-icon { font-size: 1.2rem; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* High-Resolution SVG Icons */ .icon-svg { width: 20px; height: 20px; stroke: url(#gw-grad-stellar); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: all 0.25s; } .icon-svg.icon-gold { stroke: url(#gw-grad-jupiter); } .icon-svg.icon-success { stroke: url(#gw-grad-success); } .icon-svg.icon-alert { stroke: url(#gw-grad-alert); } .icon-svg.icon-eclipse { stroke: url(#gw-grad-eclipse); } .sidebar-link:hover .icon-svg { filter: drop-shadow(0 0 6px rgba(168,213,229,0.6)); stroke-width: 2; } .sidebar-link.active .icon-svg { filter: drop-shadow(0 0 8px var(--accent-cyan)); stroke-width: 2.25; } .sidebar-link-text { transition: opacity 0.2s, width 0.3s; } .sidebar-nav.collapsed .sidebar-link-text { opacity: 0; width: 0; } .sidebar-link-badge { margin-left: auto; background: linear-gradient(135deg, var(--danger), #dc2626); color: white; font-size: 0.7rem; padding: 3px 10px; border-radius: 12px; font-weight: 700; transition: all 0.2s var(--ease-smooth); box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.2); letter-spacing: 0.5px; animation: badgePulse 2s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.2); } 50% { box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 20px rgba(239,68,68,0.45), inset 0 1px 0 rgba(255,255,255,0.25); } } .sidebar-nav.collapsed .sidebar-link-badge { position: absolute; top: 4px; right: 4px; padding: 2px 6px; font-size: 0.6rem; } /* Featured NEW item glow effect */ .sidebar-link-featured { background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), inset 0 0 20px rgba(16, 185, 129, 0.05); animation: featured-pulse 2s ease-in-out infinite; } .sidebar-link-featured:hover { box-shadow: 0 0 25px rgba(16, 185, 129, 0.25), inset 0 0 25px rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.6) !important; } .sidebar-link-featured .sidebar-link-icon svg { filter: drop-shadow(0 0 6px #10b981); } @keyframes featured-pulse { 0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.15), inset 0 0 15px rgba(16, 185, 129, 0.05); } 50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.25), inset 0 0 20px rgba(16, 185, 129, 0.08); } } /* Tooltip for collapsed state */ .sidebar-link::after { content: attr(data-title); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background: linear-gradient(145deg, rgba(15,23,42,0.98) 0%, rgba(30,41,59,0.98) 100%); border: 1px solid rgba(168,213,229,0.2); padding: 10px 16px; border-radius: 10px; font-size: 0.85rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; pointer-events: none; margin-left: 12px; z-index: 1003; box-shadow: 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sidebar-nav.collapsed .sidebar-link:hover::after { opacity: 1; visibility: visible; } .sidebar-footer { padding: 16px; border-top: 1px solid rgba(100,116,139,0.2); } .sidebar-user { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(145deg, rgba(30,41,59,0.6) 0%, rgba(15,23,42,0.4) 100%); border-radius: 14px; overflow: hidden; border: 1px solid rgba(100,116,139,0.15); transition: all 0.3s; } .sidebar-user:hover { border-color: rgba(168,213,229,0.2); box-shadow: 0 2px 12px rgba(0,0,0,0.2); } .sidebar-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, var(--accent-cyan), #60a5fa); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 2px 10px rgba(168,213,229,0.3); } .sidebar-user-info { flex: 1; transition: opacity 0.2s, width 0.3s; white-space: nowrap; } .sidebar-nav.collapsed .sidebar-user-info { opacity: 0; width: 0; overflow: hidden; } .sidebar-user-name { font-size: 0.95rem; color: var(--text-primary); font-weight: 600; } .sidebar-user-tier { font-size: 0.75rem; color: #64748b; } /* Elite/Pro visual treatment */ .sidebar-avatar.elite-avatar { background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b); box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); border: 2px solid #fbbf24; animation: eliteAvatarPulse 3s ease-in-out infinite; } .sidebar-avatar.pro-avatar { background: linear-gradient(135deg, #3b82f6, #60a5fa); box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); border: 2px solid #60a5fa; } .sidebar-user.elite-user { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)); border: 1px solid rgba(245, 158, 11, 0.2); } .sidebar-user-tier.tier-elite { color: #fbbf24; font-weight: 600; text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); } .sidebar-user-tier.tier-pro { color: #60a5fa; font-weight: 600; } @keyframes eliteAvatarPulse { 0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); } 50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.8), 0 0 40px rgba(255, 215, 0, 0.3); } } /* XP Bar in collapsed state */ .sidebar-xp { transition: opacity 0.2s; } .sidebar-nav.collapsed .sidebar-xp { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* Desktop: Always visible, collapsible */ @media (min-width: 1024px) { .sidebar-toggle { display: none; } .sidebar-nav { transform: translateX(0) !important; } .sidebar-overlay { display: none; } body.has-sidebar { padding-left: 260px; transition: padding-left 0.3s; } body.has-sidebar.sidebar-collapsed { padding-left: 70px; } /* Ensure main content respects sidebar spacing */ body.has-sidebar main, body.has-sidebar .main-content, body.has-sidebar .page-content { margin-left: 0; width: auto; } } /* Tablet: Hidden by default, full width when open */ @media (max-width: 1023px) { .sidebar-nav { transform: translateX(-100%); width: 260px !important; } .sidebar-nav.mobile-open { transform: translateX(0); } .sidebar-collapse-btn { display: none; } body.has-sidebar { padding-left: 0; } } /* Mobile: Hide desktop sidebar toggle, use bottom nav instead */ @media (max-width: 768px) { .sidebar-toggle { display: none !important; visibility: hidden !important; } .sidebar-overlay { display: none !important; visibility: hidden !important; } } /* Mobile: Full width */ @media (max-width: 600px) { .sidebar-nav { width: 100% !important; } } /* ===== MVP MODE: SIMPLIFIED NAVIGATION ===== */ /* Hide non-essential nav items for clean MVP launch */ .sidebar-section[data-section="analysis"], a[href="/galaxy/map"], a[href="/analytics/dashboard"], a[href="/social/dashboard"], a[href="/privacy/dashboard"], a[href="/family/dashboard"], a[href="/cred-check"], a[href="/pro-analysis"], a[href="/pro-search"], a[href="/wardens-veil"], a[href="/upgrade?feature=wardens-veil"], /* Hide XP progress bar for MVP */ .sidebar-xp, /* Hide gamification elements */ .streak-banner { display: none !important; } /* ===== DAILY STREAK / LOGIN REWARDS ===== --> .streak-banner { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); border: 1px solid rgba(245,158,11,0.3); border-radius: 12px; padding: 16px 20px; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .streak-icon { font-size: 2rem; animation: flamePulse 1.5s infinite; } @keyframes flamePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .streak-info { flex: 1; min-width: 200px; } .streak-title { font-family: 'Exo 2', sans-serif; font-size: 1rem; color: #f59e0b; margin-bottom: 4px; } .streak-count { font-size: 0.9rem; color: #94a3b8; } .streak-count strong { color: #fbbf24; font-size: 1.1rem; } .streak-rewards { display: flex; gap: 8px; } .streak-day { width: 36px; height: 36px; border-radius: 8px; background: rgba(100,116,139,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #64748b; position: relative; transition: all 0.3s; } .streak-day.completed { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #0a0e17; font-weight: bold; } .streak-day.today { border: 2px solid #f59e0b; animation: todayPulse 2s infinite; } @keyframes todayPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } } .streak-day.bonus { background: linear-gradient(135deg, #a78bfa, #8b5cf6); } .streak-claim-btn { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #0a0e17; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-size: 0.9rem; } .streak-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(245,158,11,0.4); } .streak-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ===== IN-APP TOUR SYSTEM ===== */ .tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s; } .tour-overlay.active { opacity: 1; visibility: visible; } .tour-highlight { position: relative; z-index: 9999; box-shadow: 0 0 0 4px var(--accent-cyan), 0 0 0 9999px rgba(0,0,0,0.7); border-radius: 12px; animation: tourPulse 2s infinite; } @keyframes tourPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-cyan), 0 0 0 9999px rgba(0,0,0,0.7); } 50% { box-shadow: 0 0 0 8px var(--accent-cyan), 0 0 0 9999px rgba(0,0,0,0.7); } } .tour-tooltip { position: fixed; background: linear-gradient(145deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98)); border: 1px solid var(--accent-cyan); border-radius: 16px; padding: 20px 24px; max-width: 360px; z-index: 10000; box-shadow: 0 0 30px var(--accent-cyan-glow), 0 20px 50px rgba(0,0,0,0.5); animation: tooltipIn 0.3s ease; } @keyframes tooltipIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tour-tooltip-arrow { position: absolute; width: 16px; height: 16px; background: rgba(30,41,59,0.98); border: 1px solid var(--accent-cyan); transform: rotate(45deg); } .tour-tooltip-arrow.top { bottom: -9px; left: 50%; margin-left: -8px; border-top: none; border-left: none; } .tour-tooltip-arrow.bottom { top: -9px; left: 50%; margin-left: -8px; border-bottom: none; border-right: none; } .tour-tooltip-arrow.left { right: -9px; top: 50%; margin-top: -8px; border-left: none; border-bottom: none; } .tour-tooltip-arrow.right { left: -9px; top: 50%; margin-top: -8px; border-right: none; border-top: none; } .tour-step-indicator { font-size: 0.75rem; color: #64748b; margin-bottom: 8px; } .tour-title { font-family: 'Exo 2', sans-serif; font-size: 1.1rem; color: var(--accent-cyan); margin-bottom: 8px; } .tour-content { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; margin-bottom: 16px; } .tour-actions { display: flex; gap: 10px; justify-content: flex-end; } .tour-btn { padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; } .tour-btn.skip { background: transparent; color: #64748b; } .tour-btn.skip:hover { color: #94a3b8; } .tour-btn.prev { background: rgba(100,116,139,0.2); color: #94a3b8; } .tour-btn.prev:hover { background: rgba(100,116,139,0.3); } .tour-btn.next { background: linear-gradient(135deg, var(--accent-cyan), #7FC8DC); color: #0a0e17; } .tour-btn.next:hover { transform: translateY(-2px); box-shadow: 0 4px 15px var(--accent-cyan-glow); } .tour-progress { display: flex; gap: 6px; margin-top: 12px; justify-content: center; } .tour-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(100,116,139,0.3); transition: all 0.3s; } .tour-dot.active { background: var(--accent-cyan); transform: scale(1.2); } .tour-dot.completed { background: #10b981; } .selection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin: 20px 0; } .platform-card, .game-card { position: relative; background: var(--bg-card); border: 2px solid rgba(168,213,229,0.15); border-radius: 12px; padding: 16px; cursor: pointer; transition: var(--transition); text-align: center; overflow: hidden; } .platform-card:hover, .game-card:hover { border-color: var(--accent-cyan); transform: translateY(-3px); box-shadow: var(--shadow-cyan); } .platform-card.selected, .game-card.selected, .platform-card:has(input:checked), .game-card:has(input:checked) { border-color: var(--accent-cyan) !important; background: var(--accent-cyan-subtle) !important; box-shadow: var(--shadow-cyan) !important; } .platform-card input[type="checkbox"], .game-card input[type="checkbox"] { position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; margin: 0; z-index: 10; } .platform-card .card-image, .game-card .card-image { width: 70px; height: 70px; object-fit: contain; margin: 0 auto 12px; display: block; border-radius: 8px; background: transparent; padding: 8px; } .platform-card .card-title, .game-card .card-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin: 0; } .check-indicator { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(168,213,229,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: var(--transition); } .check-indicator::before { content: ''; } .platform-card:has(input:checked) .check-indicator::before, .game-card:has(input:checked) .check-indicator::before, .platform-card.selected .check-indicator::before, .game-card.selected .check-indicator::before { content: '\2713'; } .platform-card.selected .check-indicator, .game-card.selected .check-indicator, .platform-card:has(input:checked) .check-indicator, .game-card:has(input:checked) .check-indicator { background: #10b981 !important; color: white !important; } .game-card.disabled { opacity: 0.5; pointer-events: none; } .platform-section { margin: 30px 0; text-align: left; } .platform-section h3 { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(168,213,229,0.2); margin-bottom: 16px; } .platform-section h3 img { width: 32px; height: 32px; object-fit: contain; } .games-count { font-size: 0.85rem; color: var(--text-secondary); font-weight: normal; margin-left: auto; } .breach-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .risk-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; } .risk-badge .risk-icon { font-size: 1rem; line-height: 1; } .risk-high { background: rgba(239,68,68,0.3); color: #fca5a5; border: 1px solid #ef4444; } .risk-medium { background: rgba(245,158,11,0.3); color: #fcd34d; border: 1px solid #f59e0b; } .risk-low { background: rgba(16,185,129,0.3); color: #6ee7b7; border: 1px solid #10b981; } /* Enhanced touch targets for mobile (48px minimum) */ .touch-target { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; } /* Checkbox enhanced for accessibility */ input[type="checkbox"] { width: 24px; height: 24px; cursor: pointer; accent-color: var(--accent-cyan); } @media (max-width: 768px) { input[type="checkbox"] { width: 28px; height: 28px; } .btn { min-height: 48px; } } /* Tooltip system */ .tooltip-wrapper { position: relative; display: inline-block; } .tooltip-trigger { cursor: help; display: inline-flex; align-items: center; gap: 4px; } .tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(100,116,139,0.3); color: #94a3b8; font-size: 0.7rem; font-weight: bold; cursor: help; transition: var(--transition-fast); } .tooltip-icon:hover { background: var(--accent-cyan-subtle); color: var(--accent-cyan); } .tooltip-content { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(15,23,42,0.98); border: 1px solid var(--accent-cyan); border-radius: 10px; padding: 12px 16px; width: max-content; max-width: 280px; font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 15px var(--accent-cyan-glow); z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; } .tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--accent-cyan); } .tooltip-wrapper:hover .tooltip-content, .tooltip-trigger:focus + .tooltip-content { opacity: 1; visibility: visible; } /* Help popover for complex features */ .help-popover { position: relative; display: inline-block; } .help-btn { background: rgba(100,116,139,0.2); border: 1px solid rgba(100,116,139,0.3); color: #94a3b8; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: var(--transition-fast); display: inline-flex; align-items: center; gap: 6px; } .help-btn:hover { background: var(--accent-cyan-subtle); border-color: var(--accent-cyan); color: var(--accent-cyan); } .help-panel { position: absolute; top: calc(100% + 8px); left: 0; background: rgba(15,23,42,0.98); border: 1px solid var(--accent-cyan); border-radius: 12px; padding: 16px; width: 300px; box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px var(--accent-cyan-glow); z-index: 150; display: none; } .help-panel.active { display: block; animation: fadeIn 0.2s ease; } .help-panel-title { font-family: 'Exo 2', sans-serif; font-size: 0.95rem; color: var(--accent-cyan); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .help-panel-content { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; } .help-panel-content ul { margin: 10px 0; padding-left: 20px; } .help-panel-content li { margin: 6px 0; } .help-panel-close { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #64748b; cursor: pointer; font-size: 1.2rem; padding: 4px; line-height: 1; } .help-panel-close:hover { color: var(--text-primary); } /* Critical alerts section */ .critical-alerts { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05)); border: 1px solid rgba(239,68,68,0.4); border-radius: 12px; padding: 16px; margin-bottom: 1.5rem; } .critical-alerts-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .critical-alerts-icon { font-size: 1.5rem; animation: pulse 2s infinite; } .critical-alerts-title { font-family: 'Exo 2', sans-serif; font-size: 1rem; color: #ef4444; } .critical-alerts-count { background: #ef4444; color: white; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; font-weight: bold; } /* View toggle in header */ .header-view-toggle { display: flex; align-items: center; gap: 8px; background: rgba(15,23,42,0.8); border: 1px solid rgba(100,116,139,0.2); border-radius: 10px; padding: 4px; } .header-view-btn { padding: 8px 16px; background: transparent; border: none; border-radius: 8px; color: #64748b; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast); display: flex; align-items: center; gap: 6px; min-height: 40px; } .header-view-btn:hover { color: #94a3b8; background: rgba(100,116,139,0.1); } .header-view-btn.active { background: linear-gradient(135deg, rgba(168,213,229,0.2), rgba(96,165,250,0.2)); color: #A8D5E5; } .header-view-btn .btn-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(15,23,42,0.95); border: 1px solid rgba(100,116,139,0.3); padding: 6px 10px; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s; pointer-events: none; } .header-view-btn:hover .btn-tooltip { opacity: 1; visibility: visible; } /* Dashboard header row */ .dashboard-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .dashboard-header-left { flex: 1; } .dashboard-header-right { display: flex; align-items: center; gap: 1rem; } @media (max-width: 600px) { .dashboard-header-row { flex-direction: column; align-items: stretch; } .dashboard-header-right { justify-content: center; } .header-view-toggle { width: 100%; justify-content: center; } } .quick-fix-list { list-style: none; padding: 0; margin: 16px 0; } .quick-fix-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin: 10px 0; background: var(--accent-cyan-subtle); border-radius: 10px; cursor: pointer; transition: var(--transition); min-height: 48px; } .quick-fix-list li:hover { background: rgba(168,213,229,0.15); transform: translateX(4px); } .quick-fix-list input[type="checkbox"] { width: 28px; height: 28px; margin-top: 0; flex-shrink: 0; accent-color: #10b981; cursor: pointer; } .quick-fix-list li.already-completed { background: rgba(16,185,129,0.15); border-left: 4px solid #10b981; opacity: 0.9; } .quick-fix-list li.already-completed span { text-decoration: line-through; color: #6ee7b7; } .quick-fix-list li.already-completed::before { content: '✓'; color: #10b981; font-weight: bold; margin-right: 8px; } @media (max-width: 768px) { .quick-fix-list input[type="checkbox"] { width: 32px; height: 32px; } } .already-done-badge { display: inline-block; background: rgba(16,185,129,0.3); color: #6ee7b7; font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; margin-left: 8px; } .mission-steps button.completed-step { background: #10b981 !important; cursor: default; opacity: 0.8; } .mission-steps button.skipped-step { background: #6b7280 !important; cursor: default; opacity: 0.7; } .mission-steps button.skipped-step::after { content: ' (Already done elsewhere)'; font-size: 0.8em; opacity: 0.8; } .pro-tip-box { background: var(--accent-cyan-subtle); border-left: 4px solid var(--accent-cyan); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; } .collapse-btn { background: rgba(168,213,229,0.15); color: var(--text-primary); border: 1px solid rgba(168,213,229,0.3); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; transition: var(--transition); } .collapse-btn:hover { background: rgba(168,213,229,0.25); border-color: var(--accent-cyan); } .collapse-content { display: none; margin-top: 16px; padding: 16px; background: rgba(0,0,0,0.2); border-radius: 8px; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; } .collapse-content.active { display: block; } /* Remediation Guide Styles - Immersive Experience */ .guide-toggle { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(139,92,246,0.15)); color: #60a5fa; font-size: 0.75rem; padding: 5px 12px; border-radius: 20px; margin-left: 8px; cursor: pointer; border: 1px solid rgba(96,165,250,0.25); transition: all 0.3s ease; vertical-align: middle; } .guide-toggle:hover { background: linear-gradient(135deg, rgba(96,165,250,0.25), rgba(139,92,246,0.25)); border-color: #60a5fa; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(96,165,250,0.2); } .guide-toggle.active { background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(96,165,250,0.3)); } .guide-locked { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(251,191,36,0.1)); color: #fbbf24; font-size: 0.75rem; padding: 5px 12px; border-radius: 20px; margin-left: 8px; cursor: pointer; border: 1px solid rgba(245,158,11,0.25); transition: all 0.3s ease; vertical-align: middle; } .guide-locked:hover { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(251,191,36,0.2)); border-color: #f59e0b; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(245,158,11,0.15); } .guide-locked:disabled { opacity: 0.6; cursor: wait; transform: none; } /* ===== FEATURE PREVIEW (Locked Content) ===== */ .feature-preview-container { position: relative; } .feature-preview-content { filter: blur(8px); pointer-events: none; user-select: none; opacity: 0.7; } .feature-preview-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(15,23,42,0.3) 0%, rgba(15,23,42,0.8) 50%, rgba(15,23,42,0.95) 100%); border-radius: 16px; z-index: 10; padding: 2rem; text-align: center; } .feature-preview-icon { font-size: 4rem; margin-bottom: 1rem; filter: drop-shadow(0 0 20px rgba(245,158,11,0.5)); } .feature-preview-title { font-size: 1.5rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.5rem; } .feature-preview-subtitle { font-size: 1rem; color: #94a3b8; margin-bottom: 1.5rem; max-width: 400px; } .feature-preview-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(139,92,246,0.2)); color: #a78bfa; font-size: 0.85rem; padding: 0.5rem 1rem; border-radius: 20px; margin-bottom: 1.5rem; border: 1px solid rgba(139,92,246,0.3); } .feature-preview-badge.commander { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(217,119,6,0.2)); color: #fbbf24; border-color: rgba(245,158,11,0.3); } .feature-preview-features { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.5rem; } .feature-preview-features span { background: rgba(0,0,0,0.3); padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.85rem; color: #e2e8f0; } .feature-preview-cta { padding: 0.875rem 2rem; background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; font-size: 1rem; transition: all 0.3s; box-shadow: 0 4px 20px rgba(245,158,11,0.4); text-decoration: none; display: inline-block; } .feature-preview-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245,158,11,0.5); } .feature-preview-cta.navigator { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 20px rgba(59,130,246,0.4); } .feature-preview-cta.navigator:hover { box-shadow: 0 8px 30px rgba(59,130,246,0.5); } /* Premium Guide Button - Free for Navigator/Commander users */ .guide-premium { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.15)); color: #10b981; font-size: 0.75rem; padding: 5px 12px; border-radius: 20px; margin-left: 8px; cursor: pointer; border: 1px solid rgba(16,185,129,0.25); transition: all 0.3s ease; vertical-align: middle; } .guide-premium:hover { background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(52,211,153,0.25)); border-color: #10b981; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(16,185,129,0.2); } .guide-premium .premium-badge { background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.65rem; padding: 1px 6px; border-radius: 8px; margin-left: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Immersive Guide Panel with Holographic Border */ .guide-panel { display: none; margin-top: 16px; background: linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(30,27,75,0.95) 100%); border-radius: 20px; overflow: visible; box-shadow: 0 25px 50px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); position: relative; } .guide-panel::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; padding: 2px; background: linear-gradient(135deg, rgba(99,102,241,0.6) 0%, rgba(168,85,247,0.4) 25%, rgba(236,72,153,0.3) 50%, rgba(59,130,246,0.4) 75%, rgba(99,102,241,0.6) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; transition: opacity 0.3s ease; pointer-events: none; } .guide-panel:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(99,102,241,0.9) 0%, rgba(168,85,247,0.7) 25%, rgba(236,72,153,0.5) 50%, rgba(59,130,246,0.7) 75%, rgba(99,102,241,0.9) 100% ); } .guide-panel::after { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70% ); background-size: 200% 200%; animation: holoShimmer 3s ease-in-out infinite; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .guide-panel:hover::after { opacity: 1; } @keyframes holoShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .guide-panel.open, .guide-panel.active { display: block; animation: guideSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes guideSlideIn { from { opacity: 0; transform: translateY(-15px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Guide Panel Inner Container */ .guide-panel-inner { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(30,27,75,0.95) 100%); } /* Clickable Checklist Styles */ .guide-checklist { padding: 20px 24px; } .guide-checklist-title { color: #a5b4fc; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .guide-checklist-title::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } .guide-checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; margin-bottom: 10px; background: linear-gradient(135deg, rgba(30,41,59,0.5), rgba(30,41,59,0.2)); border: 1px solid rgba(100,116,139,0.15); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .guide-checklist-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(99,102,241,0.1), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .guide-checklist-item:hover { border-color: rgba(99,102,241,0.3); transform: translateX(4px); box-shadow: 0 4px 20px rgba(99,102,241,0.1); } .guide-checklist-item:hover::before { transform: translateX(100%); } .guide-checklist-item.checked { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.05)); border-color: rgba(16,185,129,0.3); } .guide-checklist-item.checked:hover { transform: none; box-shadow: none; } .guide-checkbox { width: 24px; height: 24px; border-radius: 8px; border: 2px solid rgba(100,116,139,0.4); background: rgba(30,41,59,0.6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .guide-checkbox::after { content: '✓'; color: white; font-size: 14px; font-weight: bold; opacity: 0; transform: scale(0); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .guide-checklist-item:hover .guide-checkbox { border-color: rgba(99,102,241,0.6); background: rgba(99,102,241,0.1); } .guide-checklist-item.checked .guide-checkbox { background: linear-gradient(135deg, #10b981, #059669); border-color: #10b981; box-shadow: 0 0 20px rgba(16,185,129,0.4); } .guide-checklist-item.checked .guide-checkbox::after { opacity: 1; transform: scale(1); } .guide-checklist-text { flex: 1; color: #cbd5e1; font-size: 0.9rem; line-height: 1.5; transition: color 0.3s ease; } .guide-checklist-item.checked .guide-checklist-text { color: #6ee7b7; text-decoration: line-through; text-decoration-color: rgba(110,231,183,0.4); } .guide-checklist-number { color: #64748b; font-size: 0.75rem; font-weight: 600; min-width: 20px; } .guide-checklist-item.checked .guide-checklist-number { color: #10b981; } /* All Complete State */ .guide-all-complete { text-align: center; padding: 24px; background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05)); border-radius: 16px; margin: 16px 24px; border: 1px solid rgba(16,185,129,0.25); animation: completeGlow 2s ease-in-out infinite; } @keyframes completeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(16,185,129,0.2); } 50% { box-shadow: 0 0 40px rgba(16,185,129,0.4); } } .guide-all-complete-icon { font-size: 2.5rem; margin-bottom: 12px; } .guide-all-complete-text { color: #6ee7b7; font-size: 1rem; font-weight: 600; } .guide-all-complete-sub { color: #94a3b8; font-size: 0.85rem; margin-top: 8px; } /* Guide Header */ .guide-header { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); padding: 24px 28px; position: relative; overflow: hidden; } .guide-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } .guide-header::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 50%); animation: guideGlow 4s ease-in-out infinite; } @keyframes guideGlow { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; } 50% { transform: translate(-10%, 10%) rotate(5deg); opacity: 0.8; } } .guide-header-content { position: relative; z-index: 2; } .guide-header h4 { color: white; margin: 0; font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 12px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); } .guide-header .guide-icon { font-size: 1.6rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } .guide-header .guide-subtitle { color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 400; margin-top: 8px; line-height: 1.4; } .guide-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.2); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 3; } .guide-close:hover { background: rgba(0,0,0,0.4); transform: scale(1.1); } /* Personalized Greeting */ .guide-greeting { padding: 16px 24px; background: linear-gradient(90deg, rgba(99,102,241,0.1), transparent); border-bottom: 1px solid rgba(255,255,255,0.05); } .guide-greeting-text { color: #c4b5fd; font-size: 0.9rem; line-height: 1.5; } .guide-greeting .highlight { color: #a5b4fc; font-weight: 500; } .guide-greeting .device-hint { display: inline-flex; align-items: center; gap: 4px; background: rgba(99,102,241,0.2); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; margin-left: 4px; } /* Progress Section */ .guide-progress { padding: 20px 24px; background: rgba(0,0,0,0.15); } .guide-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .guide-progress-label { color: #94a3b8; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } .guide-progress-count { color: #10b981; font-weight: 600; font-size: 0.9rem; } .guide-progress-bar { height: 8px; background: rgba(100,116,139,0.2); border-radius: 4px; overflow: hidden; position: relative; } .guide-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7); border-radius: 4px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .guide-progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: progressShine 2s ease-in-out infinite; } @keyframes progressShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Guide Steps Container */ .guide-steps { padding: 24px; } /* Individual Step Card */ .guide-step { background: linear-gradient(135deg, rgba(30,41,59,0.6), rgba(30,41,59,0.3)); border: 1px solid rgba(100,116,139,0.15); border-radius: 16px; margin-bottom: 16px; overflow: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .guide-step:hover { border-color: rgba(96,165,250,0.25); transform: translateX(4px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .guide-step.completed { border-color: rgba(16,185,129,0.25); background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02)); } .guide-step.active { border-color: rgba(99,102,241,0.4); box-shadow: 0 0 30px rgba(99,102,241,0.1), inset 0 0 20px rgba(99,102,241,0.03); } .guide-step-header { display: flex; align-items: flex-start; padding: 18px 20px; cursor: pointer; gap: 14px; } .guide-step-number { width: 32px; height: 32px; background: linear-gradient(135deg, #475569, #334155); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #e2e8f0; flex-shrink: 0; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .guide-step.completed .guide-step-number { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 2px 12px rgba(16,185,129,0.3); } .guide-step.active .guide-step-number { background: linear-gradient(135deg, #6366f1, #8b5cf6); animation: numberPulse 2s ease-in-out infinite; box-shadow: 0 2px 15px rgba(99,102,241,0.4); } @keyframes numberPulse { 0%, 100% { box-shadow: 0 2px 15px rgba(99,102,241,0.4); } 50% { box-shadow: 0 2px 25px rgba(99,102,241,0.6); } } .guide-step-info { flex: 1; min-width: 0; } .guide-step-title { color: #e2e8f0; font-size: 0.95rem; font-weight: 500; line-height: 1.4; margin-bottom: 4px; } .guide-step.completed .guide-step-title { color: #6ee7b7; } .guide-step-preview { color: #64748b; font-size: 0.8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .guide-step.expanded .guide-step-preview { display: none; } .guide-step-toggle { width: 28px; height: 28px; border-radius: 8px; background: rgba(100,116,139,0.15); display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.3s ease; flex-shrink: 0; } .guide-step:hover .guide-step-toggle { background: rgba(100,116,139,0.25); color: #94a3b8; } .guide-step.expanded .guide-step-toggle { background: rgba(99,102,241,0.2); color: #a5b4fc; transform: rotate(180deg); } /* Step Content (Expanded) */ .guide-step-content { display: none; padding: 0 20px 20px 66px; } .guide-step.expanded .guide-step-content { display: block; animation: contentReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes contentReveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .guide-step-detail { background: rgba(15,23,42,0.5); padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; border-left: 3px solid #475569; color: #94a3b8; font-size: 0.85rem; line-height: 1.6; } .guide-step-detail.tip { border-left-color: #6366f1; background: rgba(99,102,241,0.08); } .guide-step-detail.warning { border-left-color: #f59e0b; background: rgba(245,158,11,0.08); color: #fcd34d; } .guide-step-detail.success { border-left-color: #10b981; background: rgba(16,185,129,0.08); color: #6ee7b7; } .guide-step-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .guide-step-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none; } .guide-step-btn.primary { background: linear-gradient(135deg, #10b981, #059669); color: white; } .guide-step-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,185,129,0.3); } .guide-step-btn.link { background: rgba(96,165,250,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.25); } .guide-step-btn.link:hover { background: rgba(96,165,250,0.25); } /* Pro Tip Section */ .guide-tip-section { margin: 0 24px 24px; padding: 20px; background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(52,211,153,0.03)); border: 1px solid rgba(16,185,129,0.15); border-radius: 16px; } .guide-tip-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .guide-tip-icon { font-size: 1.3rem; } .guide-tip-label { color: #10b981; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .guide-tip-text { color: #6ee7b7; font-size: 0.9rem; line-height: 1.6; } /* Guide Footer Actions */ .guide-footer { padding: 20px 24px; background: rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.03); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .guide-footer-link { color: #60a5fa; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } .guide-footer-link:hover { color: #93c5fd; transform: translateX(4px); } /* Completion Celebration */ .guide-complete { text-align: center; padding: 40px 30px; } .guide-complete-icon { font-size: 4rem; margin-bottom: 16px; animation: celebratePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes celebratePop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .guide-complete-title { color: #10b981; font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; } .guide-complete-text { color: #94a3b8; font-size: 0.95rem; line-height: 1.5; max-width: 300px; margin: 0 auto; } .guide-complete-confetti { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } /* Feedback Section */ .guide-feedback { margin: 0 24px 24px; padding: 20px; background: rgba(30,41,59,0.5); border-radius: 16px; text-align: center; } .guide-feedback-question { color: #94a3b8; font-size: 0.9rem; margin-bottom: 14px; } .guide-feedback-buttons { display: flex; justify-content: center; gap: 10px; } .guide-feedback-btn { padding: 10px 24px; border-radius: 25px; border: 1px solid rgba(100,116,139,0.25); background: transparent; color: #94a3b8; cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem; } .guide-feedback-btn:hover { border-color: #6366f1; color: #a5b4fc; background: rgba(99,102,241,0.1); } .guide-feedback-btn.selected { background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2)); border-color: #6366f1; color: #a5b4fc; } .guide-feedback-thanks { color: #10b981; font-size: 0.9rem; margin-top: 12px; animation: thanksFade 0.3s ease; } @keyframes thanksFade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ SPACE THEME - Galaxy & Sector Styling ============================================ */ /* Space Background with Stars */ .space-bg { position: fixed; inset: 0; z-index: -3; background: radial-gradient(ellipse at 10% 10%, rgba(168, 213, 229, 0.12) 0%, transparent 40%), radial-gradient(ellipse at 90% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 35%), radial-gradient(ellipse at 50% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 45%), radial-gradient(ellipse at 80% 70%, rgba(245, 158, 11, 0.06) 0%, transparent 30%), linear-gradient(180deg, #030712 0%, #0a0e17 30%, #1a1f2e 70%, #0a0e17 100%); } /* Animated Stars */ .stars { position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent), radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.9), transparent), radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.7), transparent); background-size: 200px 200px; animation: starTwinkle 4s ease-in-out infinite alternate; } @keyframes starTwinkle { 0% { opacity: 0.5; } 100% { opacity: 1; } } /* Sector Cards */ .sector-card { background: var(--bg-card); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(100, 116, 139, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; } .sector-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--sector-color, var(--accent-cyan)); } .sector-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px var(--sector-glow, var(--accent-cyan-glow)); border-color: var(--sector-color, var(--accent-cyan)); } .sector-card.gaming { --sector-color: var(--sector-gaming); --sector-glow: var(--sector-gaming-glow); } .sector-card.social { --sector-color: var(--sector-social); --sector-glow: var(--sector-social-glow); } .sector-card.messaging { --sector-color: var(--sector-messaging); --sector-glow: var(--sector-messaging-glow); } .sector-card.personal { --sector-color: var(--sector-personal); --sector-glow: var(--sector-personal-glow); } .sector-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; } .sector-title { font-family: 'Exo 2', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--sector-color, var(--accent-cyan)); margin-bottom: 0.5rem; } .sector-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } /* RPG-Style XP/Progress Bar */ .xp-bar-container { background: rgba(15, 23, 42, 0.8); border-radius: 20px; padding: 3px; border: 1px solid rgba(168, 213, 229, 0.2); position: relative; overflow: hidden; } .xp-bar { height: 18px; border-radius: 16px; background: linear-gradient(90deg, var(--sector-gaming) 0%, var(--sector-social) 50%, var(--sector-personal) 100%); background-size: 200% 100%; animation: xpShimmer 3s ease-in-out infinite; position: relative; display: flex; align-items: center; justify-content: center; } .xp-bar-text { font-family: 'Exo 2', sans-serif; font-size: 0.7rem; font-weight: 700; color: #0a0e17; text-shadow: 0 1px 2px rgba(255,255,255,0.3); position: absolute; width: 100%; text-align: center; } @keyframes xpShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Credit Indicator (Space RPG Style) */ .credits-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(168, 213, 229, 0.2); border-radius: 20px; } .credits-cell { width: 12px; height: 20px; background: rgba(100, 116, 139, 0.3); border-radius: 4px; position: relative; overflow: hidden; } .credits-cell.active { background: linear-gradient(180deg, var(--accent-cyan), var(--accent-cyan-dark)); box-shadow: 0 0 8px var(--accent-cyan-glow); } .credits-cell.active::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent); border-radius: 4px 4px 0 0; } .credits-label { font-family: 'Exo 2', sans-serif; font-size: 0.75rem; color: var(--accent-cyan); margin-left: 4px; } /* Rank Badges (Space Theme) */ .rank-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-family: 'Exo 2', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .rank-cadet { background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(71, 85, 105, 0.2)); border: 1px solid rgba(100, 116, 139, 0.4); color: #94a3b8; } .rank-explorer { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)); border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; } .rank-navigator { background: linear-gradient(135deg, rgba(168, 213, 229, 0.2), rgba(96, 165, 250, 0.2)); border: 1px solid rgba(168, 213, 229, 0.4); color: var(--accent-cyan); } .rank-commander { background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(139, 92, 246, 0.2)); border: 1px solid rgba(167, 139, 250, 0.4); color: #a78bfa; box-shadow: 0 0 15px rgba(167, 139, 250, 0.3); } /* ======================================== COSMIC FACETED RANK BADGES - PREMIUM ======================================== */ /* Base Cosmic Badge */ .cosmic-badge { --badge-cut: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-family: 'Exo 2', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; position: relative; clip-path: polygon( var(--badge-cut) 0%, calc(100% - var(--badge-cut)) 0%, 100% var(--badge-cut), 100% calc(100% - var(--badge-cut)), calc(100% - var(--badge-cut)) 100%, var(--badge-cut) 100%, 0% calc(100% - var(--badge-cut)), 0% var(--badge-cut) ); transition: all 0.3s ease; cursor: default; overflow: hidden; } .cosmic-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(255,255,255,0.05) 100%); pointer-events: none; } .cosmic-badge::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; pointer-events: none; } .cosmic-badge:hover::after { left: 100%; } .cosmic-badge .badge-icon { font-size: 1.1em; filter: drop-shadow(0 0 3px currentColor); } /* Explorer Tier - Frost/Ice Theme */ .cosmic-badge.tier-explorer { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); color: #6ee7b7; box-shadow: 0 0 20px rgba(110, 231, 183, 0.3), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.2); } .cosmic-badge.tier-explorer::before { background: linear-gradient(135deg, rgba(110, 231, 183, 0.1) 0%, transparent 60%); } /* Navigator Tier - Cyan/Blue Crystal */ .cosmic-badge.tier-navigator { background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 40%, #0d4f8c 100%); color: #A8D5E5; box-shadow: 0 0 25px rgba(168, 213, 229, 0.4), 0 0 50px rgba(96, 165, 250, 0.2), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.3); animation: navigatorPulse 4s ease-in-out infinite; } .cosmic-badge.tier-navigator::before { background: linear-gradient(135deg, rgba(168, 213, 229, 0.15) 0%, transparent 50%, rgba(96, 165, 250, 0.1) 100%); } @keyframes navigatorPulse { 0%, 100% { box-shadow: 0 0 25px rgba(168, 213, 229, 0.4), 0 0 50px rgba(96, 165, 250, 0.2); } 50% { box-shadow: 0 0 35px rgba(168, 213, 229, 0.6), 0 0 70px rgba(96, 165, 250, 0.3); } } /* Commander Tier - Purple Cosmic */ .cosmic-badge.tier-commander { --badge-cut: 10px; background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 40%, #4c1d95 80%, #6d28d9 100%); background-size: 200% 200%; color: #c4b5fd; box-shadow: 0 0 30px rgba(167, 139, 250, 0.5), 0 0 60px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.3); animation: commanderShift 6s ease-in-out infinite; } .cosmic-badge.tier-commander::before { background: linear-gradient(135deg, rgba(196, 181, 253, 0.15) 0%, transparent 40%, rgba(167, 139, 250, 0.1) 100%); } @keyframes commanderShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Elite/Warden Elite Tier - Gold Legendary */ .cosmic-badge.tier-elite, .cosmic-badge.tier-warden_elite { --badge-cut: 12px; background: linear-gradient(135deg, #1a1000 0%, #3d2800 30%, #6b4500 60%, #8b5a00 80%, #b8860b 100%); background-size: 300% 300%; color: #fef3c7; box-shadow: 0 0 35px rgba(251, 191, 36, 0.6), 0 0 70px rgba(245, 158, 11, 0.3), 0 0 100px rgba(255, 215, 0, 0.15), inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.3); animation: eliteGlow 4s ease-in-out infinite, eliteShimmer 8s ease-in-out infinite; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .cosmic-badge.tier-elite::before, .cosmic-badge.tier-warden_elite::before { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(251, 191, 36, 0.1) 30%, transparent 60%, rgba(245, 158, 11, 0.1) 100%); } @keyframes eliteGlow { 0%, 100% { box-shadow: 0 0 35px rgba(251, 191, 36, 0.6), 0 0 70px rgba(245, 158, 11, 0.3), 0 0 100px rgba(255, 215, 0, 0.15); } 50% { box-shadow: 0 0 45px rgba(251, 191, 36, 0.8), 0 0 90px rgba(245, 158, 11, 0.4), 0 0 120px rgba(255, 215, 0, 0.2); } } @keyframes eliteShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Warden Elite - Extra Legendary with Particles */ .cosmic-badge.tier-warden_elite { position: relative; } .cosmic-badge.tier-warden_elite .badge-particles { position: absolute; inset: -10px; pointer-events: none; overflow: visible; } .cosmic-badge.tier-warden_elite .badge-particles::before, .cosmic-badge.tier-warden_elite .badge-particles::after { content: '✦'; position: absolute; font-size: 0.6rem; color: #fbbf24; animation: starFloat 3s ease-in-out infinite; } .cosmic-badge.tier-warden_elite .badge-particles::before { top: -5px; left: 20%; animation-delay: 0s; } .cosmic-badge.tier-warden_elite .badge-particles::after { bottom: -5px; right: 25%; animation-delay: 1.5s; } @keyframes starFloat { 0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); } 50% { opacity: 1; transform: translateY(-8px) scale(1); } } /* ======================================== ACHIEVEMENT BADGES - COSMIC STYLE ======================================== */ .achievement-badge { --ach-cut: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 90px; padding: 10px; font-family: 'Exo 2', sans-serif; position: relative; clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25% ); transition: all 0.3s ease; cursor: default; } .achievement-badge .ach-icon { font-size: 1.8rem; margin-bottom: 4px; filter: drop-shadow(0 0 5px currentColor); } .achievement-badge .ach-name { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; line-height: 1.2; } .achievement-badge::before { content: ''; position: absolute; inset: 2px; clip-path: inherit; background: inherit; filter: brightness(0.8); z-index: -1; } /* Bronze Achievement */ .achievement-badge.ach-bronze { background: linear-gradient(135deg, #92400e, #b45309, #d97706); color: #fef3c7; box-shadow: 0 0 15px rgba(217, 119, 6, 0.4); } /* Silver Achievement */ .achievement-badge.ach-silver { background: linear-gradient(135deg, #374151, #6b7280, #9ca3af, #6b7280); color: #f3f4f6; box-shadow: 0 0 20px rgba(156, 163, 175, 0.4); } /* Gold Achievement */ .achievement-badge.ach-gold { background: linear-gradient(135deg, #92400e, #fbbf24, #fef3c7, #fbbf24, #92400e); background-size: 200% 200%; color: #451a03; box-shadow: 0 0 25px rgba(251, 191, 36, 0.5); animation: goldShine 3s ease-in-out infinite; } @keyframes goldShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Platinum Achievement */ .achievement-badge.ach-platinum { background: linear-gradient(135deg, #1e3a5f, #60a5fa, #e0f2fe, #60a5fa, #1e3a5f); background-size: 200% 200%; color: #0c4a6e; box-shadow: 0 0 30px rgba(96, 165, 250, 0.5), 0 0 60px rgba(168, 213, 229, 0.3); animation: platinumShine 4s ease-in-out infinite; } @keyframes platinumShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Cosmic/Legendary Achievement */ .achievement-badge.ach-cosmic { background: linear-gradient(135deg, #1a0a2e, #6d28d9, #c4b5fd, #fbbf24, #6d28d9, #1a0a2e); background-size: 300% 300%; color: #fef3c7; box-shadow: 0 0 30px rgba(167, 139, 250, 0.5), 0 0 60px rgba(251, 191, 36, 0.3), 0 0 90px rgba(109, 40, 217, 0.2); animation: cosmicShine 5s ease-in-out infinite; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } @keyframes cosmicShine { 0%, 100% { background-position: 0% 50%; } 33% { background-position: 50% 100%; } 66% { background-position: 100% 50%; } } /* ======================================== INLINE RANK PILLS - Compact Version ======================================== */ .rank-pill { --pill-cut: 5px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-family: 'Exo 2', sans-serif; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; clip-path: polygon( var(--pill-cut) 0%, calc(100% - var(--pill-cut)) 0%, 100% 50%, calc(100% - var(--pill-cut)) 100%, var(--pill-cut) 100%, 0% 50% ); } .rank-pill.pill-explorer { background: linear-gradient(90deg, #065f46, #10b981); color: #d1fae5; } .rank-pill.pill-navigator { background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa); color: #dbeafe; box-shadow: 0 0 10px rgba(96, 165, 250, 0.3); } .rank-pill.pill-commander { background: linear-gradient(90deg, #5b21b6, #8b5cf6, #a78bfa); color: #ede9fe; box-shadow: 0 0 15px rgba(167, 139, 250, 0.4); } .rank-pill.pill-elite { background: linear-gradient(90deg, #92400e, #f59e0b, #fbbf24); color: #fef3c7; box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); animation: pillGlow 2s ease-in-out infinite; } @keyframes pillGlow { 0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); } 50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.7); } } /* ======================================== STATUS BADGES - Security States ======================================== */ .status-badge { --status-cut: 4px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-family: 'Exo 2', sans-serif; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; clip-path: polygon( var(--status-cut) 0%, calc(100% - var(--status-cut)) 0%, 100% var(--status-cut), 100% calc(100% - var(--status-cut)), calc(100% - var(--status-cut)) 100%, var(--status-cut) 100%, 0% calc(100% - var(--status-cut)), 0% var(--status-cut) ); } .status-badge.status-secure { background: linear-gradient(135deg, #065f46, #10b981); color: #d1fae5; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); } .status-badge.status-warning { background: linear-gradient(135deg, #92400e, #f59e0b); color: #fef3c7; box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); } .status-badge.status-critical { background: linear-gradient(135deg, #991b1b, #ef4444); color: #fee2e2; box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); animation: criticalPulse 1.5s ease-in-out infinite; } @keyframes criticalPulse { 0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); } 50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); } } .status-badge.status-analyzing { background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa, #3b82f6, #1e40af); background-size: 200% 100%; color: #dbeafe; animation: analyzingFlow 2s linear infinite; } @keyframes analyzingFlow { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ======================================== SPECIAL EVENT BADGES ======================================== */ .event-badge { --event-cut: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: 'Exo 2', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; position: relative; clip-path: polygon( var(--event-cut) 0%, calc(100% - var(--event-cut)) 0%, 100% var(--event-cut), 100% calc(100% - var(--event-cut)), calc(100% - var(--event-cut)) 100%, var(--event-cut) 100%, 0% calc(100% - var(--event-cut)), 0% var(--event-cut) ); } .event-badge.event-beta { background: linear-gradient(135deg, #1e3a5f, #0891b2, #22d3ee); color: #ecfeff; box-shadow: 0 0 20px rgba(34, 211, 238, 0.4); } .event-badge.event-founder { background: linear-gradient(135deg, #1a0a2e, #7c3aed, #a78bfa, #fbbf24); background-size: 200% 200%; color: #fef3c7; box-shadow: 0 0 25px rgba(167, 139, 250, 0.5), 0 0 50px rgba(251, 191, 36, 0.3); animation: founderShine 4s ease-in-out infinite; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } @keyframes founderShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .event-badge.event-early-adopter { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); color: #6ee7b7; box-shadow: 0 0 15px rgba(110, 231, 183, 0.3); } .event-badge.event-limited { background: linear-gradient(135deg, #581c87, #9333ea, #c084fc); color: #f3e8ff; box-shadow: 0 0 20px rgba(192, 132, 252, 0.5); position: relative; overflow: hidden; } .event-badge.event-limited::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: limitedShine 3s ease-in-out infinite; } @keyframes limitedShine { 0%, 100% { left: -100%; } 50% { left: 150%; } } /* Mission Card */ .mission-card { background: var(--bg-card); border-radius: 12px; padding: 1.25rem; border: 1px solid rgba(100, 116, 139, 0.2); transition: all 0.3s ease; display: flex; align-items: flex-start; gap: 1rem; opacity: 1 !important; visibility: visible !important; } .mission-card.needs-analysis { opacity: 1 !important; visibility: visible !important; } .mission-card:hover { border-color: var(--accent-cyan); box-shadow: 0 4px 20px var(--accent-cyan-glow); opacity: 1 !important; } .mission-icon { width: 48px; height: 48px; background: rgba(168, 213, 229, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .mission-content { flex: 1; } .mission-title { font-family: 'Exo 2', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; } .mission-sector { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 0.5rem; } .mission-sector.gaming { background: rgba(168, 213, 229, 0.15); color: var(--sector-gaming); } .mission-sector.social { background: rgba(167, 139, 250, 0.15); color: var(--sector-social); } .mission-sector.messaging { background: rgba(96, 165, 250, 0.15); color: var(--sector-messaging); } .mission-sector.personal { background: rgba(245, 158, 11, 0.15); color: var(--sector-personal); } .mission-desc { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; } .mission-rewards { display: flex; gap: 12px; margin-top: 0.75rem; } .mission-reward { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-muted); } .mission-reward .xp { color: var(--success); } .mission-reward .credits { color: var(--accent-cyan); } /* Sector Navigation Tabs */ .sector-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 0.5rem; background: rgba(15, 23, 42, 0.5); border-radius: 12px; border: 1px solid rgba(100, 116, 139, 0.2); } .sector-tab { padding: 10px 20px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-family: 'Exo 2', sans-serif; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .sector-tab:hover { background: rgba(100, 116, 139, 0.1); color: var(--text-primary); } .sector-tab.active { background: var(--sector-color, rgba(168, 213, 229, 0.15)); border-color: var(--sector-color, var(--accent-cyan)); color: var(--sector-color, var(--accent-cyan)); } .sector-tab.gaming { --sector-color: var(--sector-gaming); } .sector-tab.social { --sector-color: var(--sector-social); } .sector-tab.messaging { --sector-color: var(--sector-messaging); } .sector-tab.personal { --sector-color: var(--sector-personal); } /* Space Map Overview */ .space-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .space-map-sector { background: var(--bg-card); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(100, 116, 139, 0.2); text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .space-map-sector::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--sector-glow, transparent) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .space-map-sector:hover::before { opacity: 1; } .space-map-sector:hover { transform: scale(1.02); border-color: var(--sector-color, var(--accent-cyan)); } .space-map-sector.gaming { --sector-color: var(--sector-gaming); --sector-glow: var(--sector-gaming-glow); } .space-map-sector.social { --sector-color: var(--sector-social); --sector-glow: var(--sector-social-glow); } .space-map-sector.messaging { --sector-color: var(--sector-messaging); --sector-glow: var(--sector-messaging-glow); } .space-map-sector.personal { --sector-color: var(--sector-personal); --sector-glow: var(--sector-personal-glow); } .space-map-icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .space-map-name { font-family: 'Exo 2', sans-serif; font-size: 0.9rem; color: var(--sector-color, var(--text-primary)); margin-bottom: 0.25rem; } .space-map-count { font-size: 0.8rem; color: var(--text-muted); } .space-map-status { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 0.75rem; font-size: 0.8rem; } .space-map-status.secure { color: var(--success); } .space-map-status.at-risk { color: var(--danger); } /* Exposure Chain Visualization */ /* ===== EXPOSURE CHAIN - ATTACK VISUALIZATION WITH OVERARCHING WARDEN ===== */ .exposure-chain-wrapper { position: relative; margin: 2rem 0; padding: 0; } /* Warden Overarch - The shield that protects */ .warden-overarch { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1rem 1rem 0; background: linear-gradient(180deg, rgba(16, 185, 129, 0.15) 0%, transparent 100%); border-radius: 20px 20px 0 0; border: 2px solid rgba(16, 185, 129, 0.3); border-bottom: none; } .warden-shield-container { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(10, 140, 100, 0.15)); border: 2px solid rgba(16, 185, 129, 0.5); border-radius: 30px; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15); animation: shieldPulse 2s ease-in-out infinite; } @keyframes shieldPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15); } 50% { box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5), 0 0 60px rgba(16, 185, 129, 0.25); } } .warden-shield { font-size: 2rem; animation: shieldBounce 3s ease-in-out infinite; } @keyframes shieldBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .warden-label { font-family: 'Exo 2', sans-serif; font-size: 0.85rem; font-weight: 700; color: #10b981; text-transform: uppercase; letter-spacing: 1px; } /* Intercept lines from Warden down to chain */ .intercept-lines { position: relative; width: 100%; height: 30px; display: flex; justify-content: space-around; padding: 0 15%; } .intercept-line { position: relative; width: 3px; height: 100%; background: linear-gradient(180deg, rgba(16, 185, 129, 0.8), rgba(16, 185, 129, 0.2)); border-radius: 2px; } .intercept-line::after { content: '⚡'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 0.9rem; animation: sparkle 1.5s ease-in-out infinite; } .intercept-line.line-1::after { animation-delay: 0s; } .intercept-line.line-2::after { animation-delay: 0.3s; } .intercept-line.line-3::after { animation-delay: 0.6s; } @keyframes sparkle { 0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.8); } 50% { opacity: 1; transform: translateX(-50%) scale(1.2); } } .exposure-chain { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; padding: 1.5rem; background: radial-gradient(ellipse at 30% 50%, rgba(239, 68, 68, 0.08) 0%, transparent 50%), linear-gradient(135deg, rgba(10,14,23,0.98) 0%, rgba(20,25,35,0.95) 100%); border: 2px solid rgba(16, 185, 129, 0.3); border-top: 2px dashed rgba(16, 185, 129, 0.4); border-radius: 0 0 20px 20px; overflow: visible; } /* Chain status bar */ .chain-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); border-radius: 0 0 20px 20px; border: 2px solid rgba(16, 185, 129, 0.3); border-top: none; margin-top: -2px; } .chain-status .status-icon { font-size: 1.2rem; animation: statusPulse 2s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .chain-status .status-text { font-family: 'Exo 2', sans-serif; font-size: 0.8rem; color: #10b981; font-weight: 600; letter-spacing: 0.5px; } .chain-node { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1rem 1.25rem; border-radius: 16px; text-align: center; min-width: 100px; z-index: 2; transition: all 0.3s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .chain-node:hover { transform: translateY(-5px) scale(1.05); } /* Source node - Gaming/Social breach */ .chain-node.source { background: linear-gradient(135deg, rgba(168, 213, 229, 0.25), rgba(0, 180, 200, 0.2)); border: 2px solid var(--sector-gaming); box-shadow: 0 4px 20px rgba(168, 213, 229, 0.2), inset 0 1px 0 rgba(255,255,255,0.1); } /* Risk node - Password reuse */ .chain-node.risk { background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(200, 120, 0, 0.2)); border: 2px solid var(--warning); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255,255,255,0.1); } /* Danger node - Bank/Identity theft - now blocked/greyed */ .chain-node.danger { background: linear-gradient(135deg, rgba(100, 100, 100, 0.3), rgba(60, 60, 60, 0.2)); border: 2px solid rgba(100, 100, 100, 0.5); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.05); opacity: 0.7; position: relative; } .chain-node.danger .chain-node-icon { filter: grayscale(0.8); } .chain-node.danger .chain-node-text { text-decoration: line-through; color: var(--text-muted); } /* BLOCKED badge on danger node */ .blocked-badge { position: absolute; top: -10px; right: -10px; background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.6rem; font-weight: 700; padding: 3px 8px; border-radius: 10px; transform: rotate(15deg); box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4); animation: badgePop 2s ease-in-out infinite; } @keyframes badgePop { 0%, 100% { transform: rotate(15deg) scale(1); } 50% { transform: rotate(15deg) scale(1.1); } } .chain-node-icon { font-size: 2rem; margin-bottom: 0.5rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); transition: transform 0.3s; } .chain-node:hover .chain-node-icon { transform: scale(1.15); } .chain-node-text { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; line-height: 1.3; } /* Chain arrows with break indicators */ .chain-arrow { position: relative; width: 60px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.5rem; z-index: 1; } /* Danger arrows (between threat nodes) */ .chain-arrow.danger-flow::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(100, 100, 100, 0.3), rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0.3)); transform: translateY(-50%); border-radius: 2px; } /* Chain break indicator - shows where Warden breaks the chain */ .chain-break { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(16, 185, 129, 0.6), 0 0 30px rgba(16, 185, 129, 0.3); animation: breakPulse 1.5s ease-in-out infinite; z-index: 5; } .chain-break::before { content: '✗'; color: #ef4444; color: white; font-size: 0.7rem; font-weight: 700; } @keyframes breakPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 15px rgba(16, 185, 129, 0.6), 0 0 30px rgba(16, 185, 129, 0.3); } 50% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 25px rgba(16, 185, 129, 0.8), 0 0 50px rgba(16, 185, 129, 0.4); } } @media (max-width: 768px) { .warden-overarch { padding: 0.75rem 0.75rem 0; } .warden-shield-container { padding: 0.5rem 1rem; } .warden-label { font-size: 0.7rem; } .intercept-lines { height: 20px; padding: 0 10%; } .exposure-chain { flex-direction: column; padding: 1rem; gap: 0.5rem; } .chain-arrow { transform: rotate(90deg); width: 30px; height: 40px; margin: -0.5rem 0; } .chain-node { min-width: 140px; } .chain-status { flex-direction: column; gap: 0.25rem; } .chain-status .status-text { font-size: 0.7rem; text-align: center; } } 0% { top: 5px; opacity: 0; transform: translateX(-50%) scale(1); } 20% { opacity: 1; } 60% { top: calc(50% - 10px); opacity: 1; transform: translateX(-50%) scale(1); } 70% { top: calc(50% - 5px); opacity: 0.8; transform: translateX(-50%) scale(0.5); } 100% { top: calc(50% - 5px); opacity: 0; transform: translateX(-50%) scale(0); } @media (max-width: 768px) { .selection-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .platform-card .card-image, .game-card .card-image { width: 50px; height: 50px; } .platform-card, .game-card { padding: 12px; } .breach-header { flex-direction: column; align-items: flex-start; } .space-map { grid-template-columns: repeat(2, 1fr); } .sector-tabs { justify-content: center; } } @media (max-width: 480px) { .selection-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .platform-card .card-image, .game-card .card-image { width: 40px; height: 40px; } .platform-card .card-title, .game-card .card-title { font-size: 0.8rem; } .space-map { grid-template-columns: 1fr; } } .nav-link { color: var(--text-secondary); font-weight: 600; padding: 8px 14px; border-radius: 12px; transition: var(--transition-fast); } .nav-link:hover { color: var(--accent-cyan); background: var(--accent-cyan-subtle); } .dropdown-link { display: block; width: 100%; text-align: left; border-radius: 6px; } .dropdown-link:hover { background: var(--accent-cyan-subtle) !important; } .account-dropdown summary::-webkit-details-marker { display: none; } .account-dropdown[open] summary { color: var(--accent-cyan); } /* ============================================ UNIFIED HUB DESIGN SYSTEM ============================================ */ /* Hub Navigation Tabs */ .hub-nav { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.5rem; background: rgba(15, 23, 42, 0.6); border-radius: 12px; border: 1px solid rgba(100, 116, 139, 0.2); overflow-x: auto; } .hub-nav-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 8px; color: #94a3b8; text-decoration: none; font-weight: 500; font-size: 0.9rem; white-space: nowrap; transition: all 0.2s ease; background: transparent; border: 1px solid transparent; } .hub-nav-item:hover { background: rgba(100, 116, 139, 0.15); color: #e2e8f0; } .hub-nav-item.active { background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.15)); border-color: rgba(96, 165, 250, 0.4); color: #60a5fa; } .hub-nav-icon { font-size: 1.1rem; } .hub-nav-badge { background: rgba(239, 68, 68, 0.3); color: #fca5a5; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; } /* Hub Header */ .hub-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .hub-header-left { display: flex; align-items: center; gap: 1rem; } .hub-icon { font-size: 2.5rem; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(96, 165, 250, 0.1); border-radius: 16px; border: 1px solid rgba(96, 165, 250, 0.3); } .hub-title { font-family: 'Exo 2', sans-serif; font-size: 1.75rem; color: #e2e8f0; margin: 0; } .hub-subtitle { color: #94a3b8; margin: 0.25rem 0 0; font-size: 0.95rem; } .hub-action-btn { padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } /* Hub Stats Bar */ .hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .hub-stat { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; padding: 1rem 1.25rem; text-align: center; transition: all 0.2s ease; } .hub-stat:hover { border-color: rgba(96, 165, 250, 0.4); transform: translateY(-2px); } .hub-stat-value { font-size: 1.75rem; font-weight: 700; font-family: 'Exo 2', sans-serif; color: #e2e8f0; margin-bottom: 0.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .hub-stat-value.success { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,0.4), 0 2px 4px rgba(0,0,0,0.2); } .hub-stat-value.warning { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.4), 0 2px 4px rgba(0,0,0,0.2); } .hub-stat-value.danger { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.4), 0 2px 4px rgba(0,0,0,0.2); } .hub-stat-value.info { color: #60a5fa; text-shadow: 0 0 20px rgba(96,165,250,0.4), 0 2px 4px rgba(0,0,0,0.2); } .hub-stat-label { color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } /* Hub Alert Banner */ .hub-alert { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 16px; margin-bottom: 1.5rem; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(8px); } .hub-alert.danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1)); border: 2px solid rgba(239, 68, 68, 0.4); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 30px rgba(239,68,68,0.1), inset 0 1px 0 rgba(255,255,255,0.05); } .hub-alert.warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)); border: 2px solid rgba(245, 158, 11, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 25px rgba(245,158,11,0.1), inset 0 1px 0 rgba(255,255,255,0.05); } .hub-alert.info { background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(167, 139, 250, 0.1)); border: 1px solid rgba(96, 165, 250, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 25px rgba(96,165,250,0.1), inset 0 1px 0 rgba(255,255,255,0.05); } .hub-alert.success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(96, 165, 250, 0.05)); border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 25px rgba(16,185,129,0.1), inset 0 1px 0 rgba(255,255,255,0.05); } .hub-alert-icon { font-size: 2rem; filter: drop-shadow(0 0 8px currentColor); } .hub-alert-content { flex: 1; min-width: 200px; } .hub-alert-title { font-weight: 600; margin-bottom: 0.25rem; } .hub-alert.danger .hub-alert-title { color: #fca5a5; text-shadow: 0 0 10px rgba(239,68,68,0.3); } .hub-alert.warning .hub-alert-title { color: #fbbf24; text-shadow: 0 0 10px rgba(245,158,11,0.3); } .hub-alert.info .hub-alert-title { color: #60a5fa; text-shadow: 0 0 10px rgba(96,165,250,0.3); } .hub-alert.success .hub-alert-title { color: #10b981; text-shadow: 0 0 10px rgba(16,185,129,0.3); } .hub-alert-text { color: #94a3b8; font-size: 0.9rem; } .hub-alert-btn { padding: 0.6rem 1.25rem; white-space: nowrap; font-size: 0.9rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.2s ease; } .hub-alert.danger .hub-alert-btn { background: linear-gradient(135deg, #ef4444, #f59e0b); color: white; } .hub-alert.warning .hub-alert-btn { background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a; } .hub-alert.info .hub-alert-btn { background: linear-gradient(135deg, #60a5fa, #a78bfa); color: white; } .hub-alert.success .hub-alert-btn { background: linear-gradient(135deg, #10b981, #059669); color: white; } /* Hub Card Grid */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .hub-card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 16px; padding: 1.5rem; transition: all 0.3s ease; } .hub-card:hover { transform: translateY(-4px); border-color: rgba(96, 165, 250, 0.4); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } /* Hub Section */ .hub-section { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(100, 116, 139, 0.2); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; } .hub-section-title { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 600; color: #e2e8f0; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; } /* ===== SHARED IMMERSIVE BACKGROUND SYSTEM ===== */ /* Apply to any page with .immersive-bg class on body or wrapper */ .immersive-wrapper { position: relative; min-height: 100vh; overflow: hidden; } /* Three.js Starfield Container - DISABLED */ #threejs-starfield { display: none !important; } /* Shared Nebula Background */ .shared-nebula { position: fixed; inset: 0; z-index: -9; background: radial-gradient(ellipse 80% 50% at 20% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 75% 70%, rgba(168, 213, 229, 0.10) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 50% 50%, rgba(236, 72, 153, 0.06) 0%, transparent 50%); animation: nebulaFloat 25s ease-in-out infinite; pointer-events: none; } @keyframes nebulaFloat { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Grid Overlay */ .shared-grid { position: fixed; inset: 0; z-index: -8; background-image: linear-gradient(rgba(168, 213, 229, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 213, 229, 0.02) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } /* Lottie Animation Container Styles */ .lottie-icon { display: inline-flex; align-items: center; justify-content: center; } .lottie-icon lottie-player { width: 100%; height: 100%; } /* Lottie icon sizes */ .lottie-sm { width: 24px; height: 24px; } .lottie-md { width: 40px; height: 40px; } .lottie-lg { width: 64px; height: 64px; } .lottie-xl { width: 96px; height: 96px; } /* Animated Icon Replacements */ .animated-icon { display: inline-flex; align-items: center; justify-content: center; position: relative; } .animated-icon.shield::before { content: '🛡️'; animation: shieldPulse 2s ease-in-out infinite; } .animated-icon.alert::before { content: '⚠️'; animation: alertFlash 1s ease-in-out infinite; } .animated-icon.rocket::before { content: '🚀'; animation: rocketFloat 2s ease-in-out infinite; } .animated-icon.target::before { content: '🎯'; animation: targetPulse 1.5s ease-in-out infinite; } .animated-icon.lock::before { content: '🔒'; animation: lockShake 3s ease-in-out infinite; } .animated-icon.check::before { content: '✅'; animation: checkBounce 0.5s ease-out; } @keyframes shieldPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(168,213,229,0.5)); } } @keyframes alertFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes rocketFloat { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-5px) rotate(-10deg); } } @keyframes targetPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes lockShake { 0%, 90%, 100% { transform: rotate(0); } 92%, 96% { transform: rotate(-3deg); } 94%, 98% { transform: rotate(3deg); } } @keyframes checkBounce { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Enhanced Page Transitions - DISABLED: causes content flash on load */ /* .page-enter { animation: pageEnter 0.4s ease-out; } @keyframes pageEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } */ /* Shared Card Enhancements */ .enhanced-card { background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.95) 100%); border: 1px solid rgba(100,116,139,0.25); border-radius: 16px; padding: 2rem; position: relative; overflow: hidden; transition: all 0.3s ease; } .enhanced-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple)); opacity: 0; transition: opacity 0.3s; } .enhanced-card:hover { transform: translateY(-4px); border-color: rgba(168,213,229,0.3); box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(168,213,229,0.1); } .enhanced-card:hover::before { opacity: 1; } /* Form Enhancements */ .enhanced-form input, .enhanced-form select, .enhanced-form textarea { background: rgba(15,23,42,0.8); border: 1px solid rgba(100,116,139,0.3); border-radius: 10px; padding: 1rem 1.25rem; color: var(--text-primary); font-size: 1rem; transition: all 0.3s ease; width: 100%; } .enhanced-form input:focus, .enhanced-form select:focus, .enhanced-form textarea:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(168,213,229,0.1), 0 0 20px rgba(168,213,229,0.1); } .enhanced-form input::placeholder { color: var(--text-muted); } /* Enhanced Buttons */ .btn-glow { position: relative; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); border: none; padding: 1rem 2rem; border-radius: 10px; color: white; font-weight: 600; cursor: pointer; overflow: hidden; transition: all 0.3s ease; } .btn-glow::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent 30%); animation: btnSpin 3s linear infinite paused; } .btn-glow:hover::before { animation-play-state: running; } .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(168,213,229,0.3); } @keyframes btnSpin { 100% { transform: rotate(360deg); } } /* Page Section Dividers */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(168,213,229,0.3), transparent); margin: 3rem 0; } /* Floating Elements */ .float-gentle { animation: floatGentle 4s ease-in-out infinite; } @keyframes floatGentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Glow Text */ .glow-text { text-shadow: 0 0 20px var(--accent-cyan-glow), 0 0 40px rgba(168,213,229,0.2); } /* Scanning Line Effect */ .scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); animation: scanDown 8s linear infinite; opacity: 0.6; } @keyframes scanDown { 0% { top: 0; opacity: 0; } 5% { opacity: 0.6; } 95% { opacity: 0.6; } 100% { top: 100%; opacity: 0; } } /* ===== COMPREHENSIVE MOBILE BREAKPOINT OPTIMIZATIONS ===== */ /* Phase 2: Element-Specific Mobile Updates per 2026 Best Practices */ /* === TABLET/LANDSCAPE (max-width: 1024px) === */ @media (max-width: 1024px) { /* Reduce particle count for performance */ .particle:nth-child(n+60) { display: none; } .glow-particle:nth-child(n+5) { display: none; } /* Simplify Three.js on tablets */ #threejs-starfield { opacity: 0.7; } /* Stack complex grids */ .protection-flow { gap: 0.5rem; } .flow-arrow { width: 30px; } /* Reduce animation complexity */ .nebula-layer { animation-duration: 30s; } } /* === MEDIUM MOBILE (max-width: 768px) === */ @media (max-width: 768px) { /* PARTICLES: Reduce to 40, simplify */ .particle:nth-child(n+40) { display: none; } .glow-particle { display: none; } /* Disable glow particles */ /* Shooting stars: Shown with mobile-optimized settings via JS */ .scanner-beam { display: none; } /* Disable scanner beam */ /* PARALLAX: Disable, use static */ .parallax-layer { transform: none !important; } /* NEBULA: Reduce complexity */ .nebula-layer, .shared-nebula { animation: none; opacity: 0.5; background-size: 200% 200%; } /* THREE.JS: Reduce opacity, consider disabling */ #threejs-starfield { opacity: 0.4; } /* LOTTIE: Reduce size */ .lottie-lg { width: 48px; height: 48px; } .lottie-xl { width: 64px; height: 64px; } /* ANIMATIONS: Shorten durations */ [data-reveal] { transition-duration: 0.3s; } .flow-node { transition-duration: 0.2s; } /* PROTECTION FLOW: Vertical stack */ .protection-flow { flex-direction: column; padding: 1rem; } .flow-arrow { width: 2px; height: 24px; margin: 0 auto; } .flow-arrow::after { content: '↓'; right: 50%; top: auto; bottom: -10px; transform: translateX(50%); } .flow-node { width: 100%; max-width: 280px; margin: 0 auto; } /* GRIDS: Vertical stacking */ .features-grid, .stats-grid, .benefits-list { grid-template-columns: 1fr; } /* CARDS: Full width, increased spacing */ .feature-card, .stat-card, .breach-card { padding: 1.25rem; } /* RADAR: Smaller on mobile */ .radar-display { width: 200px; height: 200px; } /* CAROUSEL: Touch-optimized */ .breach-carousel-track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .breach-carousel-nav { display: none; } .swipe-hint { display: block; } /* NAVIGATION: Bottom sticky nav hint */ .mobile-quick-nav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(10, 14, 23, 0.95); backdrop-filter: blur(10px); border-top: 1px solid rgba(168, 213, 229, 0.2); padding: 0.5rem; display: flex; justify-content: space-around; z-index: 1000; } /* FORMS: Full width inputs */ .enhanced-form input, .enhanced-form select, .scanner-input { font-size: 16px; /* Prevents iOS zoom */ padding: 1rem; } /* TOUCH TARGETS: Ensure 48px minimum */ button, .btn, a.btn, .flow-node, .sector-tab, .carousel-indicator { min-height: 48px; min-width: 48px; } /* SPACING: Increased for thumb navigation */ .sector-tabs { gap: 0.75rem; } .carousel-indicators { gap: 0.75rem; } /* TYPOGRAPHY: Improved readability */ .hero-title { font-size: clamp(1.8rem, 5vw, 2.5rem); } .hero-subtitle { font-size: 1rem; line-height: 1.6; } /* CONTAINERS: Reduced padding */ .container { padding: 0 12px; } .scanner-container, .login-container, .register-container, .reset-container { padding: 1rem 0.75rem; } } /* === SMALL MOBILE (max-width: 480px) === */ @media (max-width: 480px) { /* PARTICLES: CSS fallback only */ .particles, .particle, #particles { display: none !important; } /* THREE.JS: Disable completely on small screens */ #threejs-starfield { display: none !important; } /* BACKGROUND: Lightweight CSS-only starfield */ .cyber-bg { background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8) 1px, transparent 0), radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 1px, transparent 0), radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.5) 1px, transparent 0), radial-gradient(1.5px 1.5px at 60% 20%, rgba(168,213,229,0.8) 1px, transparent 0), radial-gradient(1.5px 1.5px at 80% 80%, rgba(167,139,250,0.7) 1px, transparent 0), linear-gradient(180deg, #0a0e17 0%, #1a1f2e 100%); background-size: 150px 150px, 200px 200px, 250px 250px, 180px 180px, 220px 220px, 100% 100%; } /* NEBULA: Simplified static gradient */ .nebula-layer, .shared-nebula { background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 60%); animation: none; opacity: 0.4; } /* GRID: Hide on very small screens */ .cyber-grid, .shared-grid { opacity: 0.3; } /* LOTTIE: Static fallbacks for icons, but allow hero animation */ lottie-player { display: none; } lottie-player.hero-lottie { display: block; } .lottie-icon::before { content: attr(data-emoji-fallback); font-size: inherit; } /* ANIMATIONS: Minimal or none */ [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .animated-icon::before { animation: none; } /* CARDS: Compact layout */ .enhanced-card, .login-card, .register-card, .reset-card, .scanner-interface { padding: 1.25rem; border-radius: 12px; } /* TYPOGRAPHY: Compact */ .hero-title { font-size: 1.6rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } /* BUTTONS: Full width CTAs */ .btn-hero, .scanner-btn, .login-btn, .register-btn, .reset-btn { width: 100%; justify-content: center; } /* SCANNER DEMO: Simplified */ .radar-display { width: 160px; height: 160px; } .scan-console { max-height: 100px; font-size: 0.75rem; } .scan-stats { grid-template-columns: repeat(2, 1fr); } /* BREACH CARDS: Stacked layout */ .breach-card { grid-template-columns: 1fr; text-align: center; gap: 0.75rem; } .breach-card-icon { margin: 0 auto; } /* RECOMMENDATIONS: Compact */ .recommendation-item { flex-direction: column; text-align: center; gap: 0.5rem; } /* FLOW NODES: Compact */ .flow-node { padding: 0.75rem 1rem; min-width: unset; } .flow-node-icon { font-size: 1.5rem; } /* AI ANALYSIS: Compact */ .ai-analysis-panel { padding: 1rem; } .ai-analysis-panel::before { font-size: 0.6rem; padding: 0.4rem 0.75rem; } /* HIDE NON-ESSENTIAL */ .demo-preview::before { display: none; } /* Commander badge */ .tier-badge { font-size: 0.6rem; padding: 3px 8px; } } /* === TOUCH DEVICE OPTIMIZATIONS === */ @media (hover: none) and (pointer: coarse) { /* Disable hover-only effects */ .feature-card:hover, .stat-card:hover, .flow-node:hover, .space-map-sector:hover, .breach-card:hover { transform: none; } /* Add active states for touch feedback */ .feature-card:active, .stat-card:active, .flow-node:active, .breach-card:active { transform: scale(0.98); opacity: 0.9; } /* Ensure touch-friendly spacing */ .sector-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sector-tabs::-webkit-scrollbar { display: none; } /* Swipe-friendly carousels */ .breach-carousel-track { scroll-behavior: smooth; scroll-snap-type: x mandatory; } .breach-carousel-track > * { scroll-snap-align: start; } } /* === HIGH-DPI / RETINA DISPLAYS === */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Sharper borders */ .enhanced-card, .login-card, .scanner-interface { border-width: 0.5px; } /* Crisper gradients */ .hero-title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } /* === LANDSCAPE MOBILE === */ @media (max-height: 500px) and (orientation: landscape) { /* Compact vertical spacing */ .hero-section { padding: 1rem 0; } .pricing-hero { padding: 1rem 0; } .scanner-header { margin-bottom: 1rem; } /* Side-by-side layout for radar */ .radar-container { margin: 1rem 0; } .radar-display { width: 150px; height: 150px; } } /* === SAFE AREA INSETS (iPhone X+, etc.) === */ @supports (padding: max(0px)) { .mobile-quick-nav { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); } .container { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .shared-nebula, .animated-icon::before, .btn-glow::before, .float-gentle, .scan-line { animation: none !important; } } /* ============================================ SHARED IMMERSIVE BACKGROUND (Landing Page Style) ============================================ */ /* Nebula Layer - Animated gradient clouds */ .nebula-layer { position: fixed; inset: 0; z-index: -3; background: radial-gradient(ellipse 80% 50% at 20% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 75% 70%, rgba(168, 213, 229, 0.10) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 50% 50%, rgba(236, 72, 153, 0.06) 0%, transparent 50%); animation: nebulaShift 20s ease-in-out infinite; pointer-events: none; } @keyframes nebulaShift { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; opacity: 0.8; } 33% { background-position: 20% 30%, 80% 60%, 30% 70%; opacity: 1; } 66% { background-position: 10% 50%, 90% 40%, 60% 30%; opacity: 0.9; } } /* Shooting Stars Container - Base layer behind all content */ .shooting-stars { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; } .shooting-stars canvas { width: 100%; height: 100%; display: block; background: transparent; } /* Disable shooting stars on very small screens or when reduced motion preferred */ @media (max-width: 480px), (prefers-reduced-motion: reduce) { .shooting-stars { display: none !important; } } /* ================================================================ UI POLISH ENHANCEMENT SYSTEM Multi-layered shadows, glows, micro-interactions & refined depth ================================================================ */ /* === ENHANCED CSS VARIABLES === */ :root { /* Multi-layer shadow system */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.2); --shadow-sm: 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1); --shadow-md: 0 4px 12px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.15); --shadow-xl: 0 12px 40px rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.2); /* Colored glow shadows */ --glow-cyan-sm: 0 0 15px rgba(168,213,229,0.2); --glow-cyan-md: 0 0 25px rgba(168,213,229,0.3), 0 0 50px rgba(168,213,229,0.1); --glow-cyan-lg: 0 0 40px rgba(168,213,229,0.4), 0 0 80px rgba(168,213,229,0.15); --glow-purple-sm: 0 0 15px rgba(167,139,250,0.2); --glow-purple-md: 0 0 25px rgba(167,139,250,0.3), 0 0 50px rgba(167,139,250,0.1); --glow-purple-lg: 0 0 40px rgba(167,139,250,0.4), 0 0 80px rgba(167,139,250,0.15); --glow-success-sm: 0 0 15px rgba(16,185,129,0.2); --glow-success-md: 0 0 25px rgba(16,185,129,0.3); --glow-danger-sm: 0 0 15px rgba(239,68,68,0.2); --glow-danger-md: 0 0 25px rgba(239,68,68,0.3); --glow-warning-sm: 0 0 15px rgba(245,158,11,0.2); --glow-warning-md: 0 0 25px rgba(245,158,11,0.3); /* Polish transition curves */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Inset depth */ --inset-light: inset 0 1px 0 rgba(255,255,255,0.08); --inset-dark: inset 0 -1px 0 rgba(0,0,0,0.15); --inset-depth: inset 0 2px 4px rgba(0,0,0,0.2); } /* === ENHANCED KEYFRAME ANIMATIONS === */ @keyframes polishPulse { 0%, 100% { box-shadow: var(--shadow-md), var(--glow-cyan-sm); } 50% { box-shadow: var(--shadow-lg), var(--glow-cyan-md); } } @keyframes polishGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(168,213,229,0.3)); } 50% { filter: drop-shadow(0 0 20px rgba(168,213,229,0.5)); } } @keyframes polishFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes polishShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes borderPulse { 0%, 100% { border-color: rgba(168,213,229,0.3); } 50% { border-color: rgba(168,213,229,0.6); } } @keyframes iconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes softBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } /* === POLISHED CARD SYSTEM === */ .polished-card, .dashboard-card, .breach-card, .stat-card, .feature-card, .info-card, .metric-card, .quest-card, .member-card, .asset-card, .sector-panel { box-shadow: var(--shadow-md), var(--inset-light), 0 0 0 1px rgba(255,255,255,0.03); transition: all 0.3s var(--ease-smooth); position: relative; } .polished-card:hover, .dashboard-card:hover, .breach-card:hover, .stat-card:hover, .feature-card:hover, .info-card:hover, .metric-card:hover, .quest-card:hover, .member-card:hover, .asset-card:hover, .sector-panel:hover { box-shadow: var(--shadow-xl), var(--glow-cyan-sm), var(--inset-light), 0 0 0 1px rgba(168,213,229,0.15); transform: translateY(-4px); } /* Featured/Commander tier cards get extra glow */ .featured-card, .commander-card, .elite-card, .premium-card { box-shadow: var(--shadow-lg), var(--glow-purple-sm), var(--inset-light); border: 1px solid rgba(167,139,250,0.3); } .featured-card:hover, .commander-card:hover, .elite-card:hover, .premium-card:hover { box-shadow: var(--shadow-xl), var(--glow-purple-md), var(--inset-light); transform: translateY(-6px) scale(1.01); border-color: rgba(167,139,250,0.5); } /* === POLISHED BUTTONS === */ .btn, .btn-primary, .btn-hero, .quick-btn, .panel-action { box-shadow: var(--shadow-sm), var(--glow-cyan-sm), var(--inset-light), var(--inset-dark); transition: all 0.25s var(--ease-smooth); position: relative; overflow: hidden; } .btn:hover, .btn-primary:hover, .btn-hero:hover, .quick-btn:hover, .panel-action:hover { box-shadow: var(--shadow-md), var(--glow-cyan-md), var(--inset-light); transform: translateY(-2px); } .btn:active, .btn-primary:active, .btn-hero:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-xs), var(--glow-cyan-sm), var(--inset-depth); } /* Secondary/Ghost buttons */ .btn-secondary, .btn-ghost, .btn-outline { box-shadow: var(--shadow-sm), 0 0 0 1px rgba(168,213,229,0.3); } .btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover { box-shadow: var(--shadow-md), var(--glow-cyan-sm), 0 0 0 1px rgba(168,213,229,0.5); background: rgba(168,213,229,0.08); } /* Purple accent buttons */ .btn-purple, .btn-commander, .btn-upgrade { background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); box-shadow: var(--shadow-sm), var(--glow-purple-sm), var(--inset-light); } .btn-purple:hover, .btn-commander:hover, .btn-upgrade:hover { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); box-shadow: var(--shadow-md), var(--glow-purple-md), var(--inset-light); } /* Danger button enhancements */ .btn-danger { box-shadow: var(--shadow-sm), var(--glow-danger-sm), var(--inset-light); } .btn-danger:hover { box-shadow: var(--shadow-md), var(--glow-danger-md), var(--inset-light); } /* Success button enhancements */ .btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: var(--shadow-sm), var(--glow-success-sm), var(--inset-light); } .btn-success:hover { box-shadow: var(--shadow-md), var(--glow-success-md), var(--inset-light); } /* === POLISHED INPUTS === */ input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-input, .form-control { box-shadow: var(--shadow-xs), var(--inset-depth), 0 0 0 1px rgba(100,116,139,0.15); transition: all 0.2s var(--ease-smooth); } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .form-input:focus, .form-control:focus { box-shadow: var(--shadow-sm), var(--glow-cyan-sm), 0 0 0 3px rgba(168,213,229,0.15), var(--inset-depth); border-color: var(--accent-cyan); } input:not([type="checkbox"]):not([type="radio"]):hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: rgba(168,213,229,0.4); box-shadow: var(--shadow-sm), var(--inset-depth), 0 0 0 1px rgba(168,213,229,0.1); } /* === POLISHED STATUS BADGES === */ .badge, .status-badge, .tier-badge, .level-badge { box-shadow: var(--shadow-xs), var(--inset-light); transition: all 0.2s var(--ease-smooth); } .badge-success, .status-secure, .status-active { box-shadow: var(--shadow-xs), var(--glow-success-sm), var(--inset-light); } .badge-danger, .status-critical, .status-breach { box-shadow: var(--shadow-xs), var(--glow-danger-sm), var(--inset-light); animation: softBreathe 2s ease-in-out infinite; } .badge-warning, .status-warning { box-shadow: var(--shadow-xs), var(--glow-warning-sm), var(--inset-light); } .badge-purple, .tier-commander, .tier-elite { box-shadow: var(--shadow-xs), var(--glow-purple-sm), var(--inset-light); } /* === POLISHED ALERTS & NOTIFICATIONS === */ .alert, .notification, .toast { box-shadow: var(--shadow-lg), var(--inset-light); backdrop-filter: blur(12px); } .alert.success, .notification.success { box-shadow: var(--shadow-lg), var(--glow-success-sm), var(--inset-light); } .alert.error, .alert.danger, .notification.error { box-shadow: var(--shadow-lg), var(--glow-danger-sm), var(--inset-light); } .alert.warning, .notification.warning { box-shadow: var(--shadow-lg), var(--glow-warning-sm), var(--inset-light); } /* === POLISHED PROGRESS BARS === */ .progress-bar, .progress-container { box-shadow: var(--inset-depth), 0 1px 0 rgba(255,255,255,0.03); } .progress-fill, .progress-bar-fill { box-shadow: var(--glow-cyan-sm), var(--inset-light), inset 0 -2px 4px rgba(0,0,0,0.2); } /* === POLISHED TEXT EFFECTS === */ .polished-heading, h1.glow, h2.glow, .section-title, .card-title.glow { text-shadow: 0 0 20px rgba(168,213,229,0.3), 0 2px 4px rgba(0,0,0,0.3); } .gradient-text, .shimmer-text { background: linear-gradient(135deg, #A8D5E5 0%, #a78bfa 50%, #A8D5E5 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: polishShimmer 3s linear infinite; } /* === POLISHED ICONS === */ .icon-glow, .cyber-icon-enhanced { filter: drop-shadow(0 0 6px rgba(168,213,229,0.4)); transition: filter 0.2s var(--ease-smooth); } .icon-glow:hover, .cyber-icon-enhanced:hover { filter: drop-shadow(0 0 12px rgba(168,213,229,0.6)); } .icon-pulse { animation: iconBounce 2s ease-in-out infinite; } /* === POLISHED TOOLTIPS === */ [data-tooltip]::after, .tooltip { box-shadow: var(--shadow-lg), var(--glow-cyan-sm); backdrop-filter: blur(8px); } /* === POLISHED MODALS === */ .modal-content, .modal-body, .dialog-content { box-shadow: var(--shadow-xl), var(--glow-cyan-sm), 0 0 0 1px rgba(168,213,229,0.1); backdrop-filter: blur(16px); } /* === POLISHED NAVIGATION === */ .sidebar-link, .nav-link { transition: all 0.2s var(--ease-smooth); } .sidebar-link:hover, .nav-link:hover { box-shadow: var(--shadow-sm), var(--glow-cyan-sm); background: rgba(168,213,229,0.08); } .sidebar-link.active, .nav-link.active { box-shadow: var(--shadow-sm), var(--glow-cyan-md), inset 3px 0 0 var(--accent-cyan); } /* === POLISHED TABLES === */ .polished-table th { text-shadow: 0 1px 2px rgba(0,0,0,0.3); background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%); } .polished-table tr:hover td { background: rgba(168,213,229,0.05); box-shadow: inset 0 0 30px rgba(168,213,229,0.03); } /* === UTILITY CLASSES === */ .shadow-glow { box-shadow: var(--shadow-md), var(--glow-cyan-sm); } .shadow-glow-lg { box-shadow: var(--shadow-lg), var(--glow-cyan-md); } .shadow-glow-purple { box-shadow: var(--shadow-md), var(--glow-purple-sm); } .shadow-glow-success { box-shadow: var(--shadow-md), var(--glow-success-sm); } .shadow-glow-danger { box-shadow: var(--shadow-md), var(--glow-danger-sm); } /* === INLINE SVG ICON SYSTEM (Emoji Replacements) === */ .icon-inline { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; vertical-align: middle; flex-shrink: 0; } .icon-inline svg { width: 100%; height: 100%; display: block; } .icon-inline-sm { width: 1em; height: 1em; } .icon-inline-md { width: 1.5em; height: 1.5em; } .icon-inline-lg { width: 2em; height: 2em; } .icon-inline-xl { width: 2.5em; height: 2.5em; } /* Icon color variants */ .icon-cyan svg { stroke: var(--accent-cyan); } .icon-purple svg { stroke: var(--accent-purple); } .icon-success svg { stroke: var(--success); } .icon-danger svg { stroke: var(--danger); } .icon-warning svg { stroke: var(--warning); } .icon-muted svg { stroke: var(--text-muted); } /* Icon gradient variants */ .icon-grad-stellar svg { stroke: url(#gw-grad-stellar); } .icon-grad-jupiter svg { stroke: url(#gw-grad-jupiter); } .icon-grad-success svg { stroke: url(#gw-grad-success); } .icon-grad-alert svg { stroke: url(#gw-grad-alert); } .icon-grad-eclipse svg { stroke: url(#gw-grad-eclipse); } /* Icon glow effects */ .icon-glow-cyan { filter: drop-shadow(0 0 6px rgba(168,213,229,0.5)); } .icon-glow-purple { filter: drop-shadow(0 0 6px rgba(167,139,250,0.5)); } .icon-glow-success { filter: drop-shadow(0 0 6px rgba(16,185,129,0.5)); } .icon-glow-danger { filter: drop-shadow(0 0 6px rgba(239,68,68,0.5)); } .icon-glow-warning { filter: drop-shadow(0 0 6px rgba(245,158,11,0.5)); } .hover-lift { transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth); } .hover-lift:hover { transform: translateY(-4px); } .hover-glow { transition: box-shadow 0.25s var(--ease-smooth); } .hover-glow:hover { box-shadow: var(--shadow-lg), var(--glow-cyan-md); } .hover-scale { transition: transform 0.25s var(--ease-spring); } .hover-scale:hover { transform: scale(1.03); } .animate-pulse-glow { animation: polishPulse 3s ease-in-out infinite; } .animate-float { animation: polishFloat 4s ease-in-out infinite; } .animate-border-pulse { animation: borderPulse 2s ease-in-out infinite; } /* Glass morphism enhancement */ .glass, .glass-card { background: linear-gradient(135deg, rgba(30,41,59,0.85) 0%, rgba(15,23,42,0.9) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-lg), var(--inset-light), 0 0 0 1px rgba(255,255,255,0.03); } /* Depth layers for nested cards */ .depth-1 { box-shadow: var(--shadow-sm); } .depth-2 { box-shadow: var(--shadow-md); } .depth-3 { box-shadow: var(--shadow-lg); } .depth-4 { box-shadow: var(--shadow-xl); } /* === MOBILE POLISH ADJUSTMENTS === */ @media (max-width: 768px) { /* Reduce glow intensity on mobile for performance */ :root { --glow-cyan-sm: 0 0 10px rgba(168,213,229,0.15); --glow-cyan-md: 0 0 15px rgba(168,213,229,0.2); --glow-purple-sm: 0 0 10px rgba(167,139,250,0.15); --glow-purple-md: 0 0 15px rgba(167,139,250,0.2); } /* Disable hover transforms on touch devices */ @media (hover: none) { .hover-lift:hover, .hover-scale:hover, .polished-card:hover, .dashboard-card:hover { transform: none; } } /* Simpler shadows on mobile */ .polished-card, .dashboard-card, .btn { box-shadow: var(--shadow-sm), var(--inset-light); } } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { .animate-pulse-glow, .animate-float, .animate-border-pulse, .icon-pulse, .shimmer-text { animation: none; } .hover-lift:hover, .hover-scale:hover { transform: none; } } /* === COSMIC TIER CARDS === */ /* Premium cosmic cards used in pricing grids */ .tier-card-cosmic { padding: 24px; min-height: 480px; } .tier-card-cosmic .tier-header { text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .tier-card-cosmic .tier-feature { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.9rem; } .tier-card-cosmic .tier-feature.highlight { padding: 0.5rem; margin: 0.25rem -0.5rem; border-radius: 6px; } .tier-card-cosmic .feature-icon { flex-shrink: 0; margin-top: 2px; } /* Ensure cosmic cards align with regular tier cards in grid */ .pricing-grid .tier-card-cosmic { display: flex; flex-direction: column; } /* Cosmic platform cards (for Gaming Hub links) */ .cosmic-platform-link { display: block; cursor: pointer; } .cosmic-platform-link .cosmic-content { padding: 20px; } .cosmic-platform-link:hover { transform: translateY(-4px); } .cosmic-platform-link:hover .cosmic-content > div:last-child { transform: translateX(4px); transition: transform 0.3s ease; } /* Cosmic plan cards (for upgrade/pricing grids) */ .plan-card-cosmic { padding: 24px; min-height: 520px; } .plan-card-cosmic .cosmic-content { display: flex; flex-direction: column; height: 100%; } .plans-grid .plan-card-cosmic { /* Ensure it aligns with other plan cards in grid */ align-self: stretch; } /* ============================================ COSMIC CARDS - EXTENDED INTEGRATION ============================================ */ /* Analytics cards with cosmic enhancement */ .analytics-card.cosmic-enhanced { position: relative; overflow: visible; } .analytics-card.cosmic-enhanced::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(168,213,229,0.3), rgba(167,139,250,0.2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Dashboard cards cosmic hover */ .dashboard-card:hover { border-color: rgba(168, 213, 229, 0.25); box-shadow: 0 0 40px rgba(168, 213, 229, 0.08), 0 8px 30px rgba(0, 0, 0, 0.4); } /* ===== MISSION FOCUS MODE — Single Mission Card ===== */ .mission-focus-container { padding: 0; } .mission-focus-card { background: linear-gradient(145deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98)); border: 1px solid rgba(100,116,139,0.25); border-radius: 16px; padding: 0; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .mission-focus-card.critical { border-color: rgba(239,68,68,0.4); box-shadow: 0 0 20px rgba(239,68,68,0.08); } .mission-focus-card.high { border-color: rgba(249,115,22,0.35); box-shadow: 0 0 20px rgba(249,115,22,0.06); } .mission-focus-card.medium { border-color: rgba(234,179,8,0.3); } .mission-focus-card.low { border-color: rgba(100,116,139,0.3); } .mf-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; gap: 0.75rem; } .mf-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .mf-icon { font-size: 1.5rem; flex-shrink: 0; } .mf-breach-name { font-weight: 700; font-size: 1.05rem; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mf-progress-text { font-size: 0.78rem; color: #94a3b8; margin-top: 0.15rem; } .mf-risk-badge { flex-shrink: 0; padding: 0.25rem 0.65rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .mf-risk-badge.critical { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); } .mf-risk-badge.high { background: rgba(249,115,22,0.15); color: #fdba74; border: 1px solid rgba(249,115,22,0.3); } .mf-risk-badge.medium { background: rgba(234,179,8,0.12); color: #fcd34d; border: 1px solid rgba(234,179,8,0.25); } .mf-risk-badge.low { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); } .mf-progress-bar { height: 4px; background: rgba(100,116,139,0.2); overflow: hidden; } .mf-progress-fill { height: 100%; border-radius: 0 2px 2px 0; transition: width 0.5s ease; } .mf-progress-fill.critical { background: linear-gradient(90deg, #ef4444, #f87171); } .mf-progress-fill.high { background: linear-gradient(90deg, #f97316, #fb923c); } .mf-progress-fill.medium { background: linear-gradient(90deg, #eab308, #facc15); } .mf-progress-fill.low { background: linear-gradient(90deg, #64748b, #94a3b8); } .mf-exposed { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; border-bottom: 1px solid rgba(100,116,139,0.12); } .mf-exposed-tag { display: inline-block; padding: 0.2rem 0.5rem; background: rgba(100,116,139,0.12); border: 1px solid rgba(100,116,139,0.2); border-radius: 4px; font-size: 0.7rem; color: #cbd5e1; } .mf-scan-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.65rem; font-weight: 600; } .mf-scan-badge.deep { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; } .mf-scan-badge.basic { background: rgba(100,116,139,0.1); border: 1px solid rgba(100,116,139,0.2); color: #94a3b8; } .mf-step-card { margin: 1rem 1.25rem; padding: 1rem; background: rgba(15,23,42,0.6); border: 1px solid rgba(100,116,139,0.2); border-radius: 10px; } .mf-step-card.secured { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.06); } .mf-step-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.5rem; } .mf-step-text { font-size: 0.95rem; color: #e2e8f0; line-height: 1.5; margin-bottom: 0.75rem; } .mf-step-why { font-size: 0.8rem; color: #94a3b8; line-height: 1.4; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: rgba(167,139,250,0.06); border-left: 2px solid rgba(167,139,250,0.3); border-radius: 0 6px 6px 0; } .mf-action-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .mf-action-btn.complete { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .mf-action-btn.complete:hover { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 4px 12px rgba(16,185,129,0.3); } .mf-action-btn.analyze { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; } .mf-action-btn.analyze:hover { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 12px rgba(167,139,250,0.3); } .mf-action-btn:disabled { opacity: 0.6; cursor: not-allowed; } .mf-action-btn .analyzing-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } .mf-completed-steps { margin: 0 1.25rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; } .mf-completed-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: #64748b; text-decoration: line-through; text-decoration-color: rgba(100,116,139,0.4); } .mf-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-top: 1px solid rgba(100,116,139,0.12); } .mf-view-all { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: #a78bfa; text-decoration: none; font-weight: 500; transition: color 0.2s; } .mf-view-all:hover { color: #c4b5fd; } .mf-secured-count { font-size: 0.75rem; color: #10b981; font-weight: 600; } .mf-upsell { display: flex; align-items: center; gap: 1rem; margin: 0.75rem 1.25rem 1rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(168,213,229,0.06)); border: 1px dashed rgba(167,139,250,0.3); border-radius: 10px; } .mf-upsell-icon { font-size: 1.3rem; flex-shrink: 0; } .mf-upsell-title { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; margin-bottom: 0.15rem; } .mf-upsell-text { font-size: 0.75rem; color: #94a3b8; } .mf-upsell-btn { flex-shrink: 0; padding: 0.45rem 1rem; background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; border-radius: 6px; font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: all 0.2s; } .mf-upsell-btn:hover { box-shadow: 0 4px 12px rgba(167,139,250,0.3); transform: translateY(-1px); } .mf-all-clear { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== MISSIONS WIZARD — One at a Time Navigation ===== */ .missions-wizard { margin-top: 1.5rem; } .wizard-mission { display: none; } .wizard-mission.active { display: block; } .wizard-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: rgba(30,41,59,0.8); border: 1px solid rgba(100,116,139,0.25); border-radius: 12px 12px 0 0; gap: 0.75rem; } .wizard-nav-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; background: rgba(100,116,139,0.15); border: 1px solid rgba(100,116,139,0.25); border-radius: 6px; color: #94a3b8; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .wizard-nav-btn:hover:not(:disabled) { background: rgba(167,139,250,0.15); border-color: rgba(167,139,250,0.35); color: #c4b5fd; } .wizard-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; } .wizard-nav-title { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; } .wizard-nav-count { font-size: 0.7rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .wizard-nav-name { font-size: 1rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .wizard-body { display: flex; gap: 0; border: 1px solid rgba(100,116,139,0.2); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; background: rgba(15,23,42,0.6); } .wizard-sidebar { flex: 0 0 260px; padding: 1.25rem; background: rgba(30,41,59,0.5); border-right: 1px solid rgba(100,116,139,0.15); display: flex; flex-direction: column; align-items: flex-start; } .wizard-sidebar-icon { font-size: 2rem; margin-bottom: 0.5rem; } .wizard-sidebar-name { font-size: 1.1rem; font-weight: 700; color: #e2e8f0; margin: 0 0 0.25rem 0; word-break: break-word; } .wizard-sidebar-section { margin-top: 1rem; width: 100%; } .wizard-sidebar-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 0.3rem; } .wizard-sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .wizard-steps { flex: 1; padding: 1.25rem; min-width: 0; } .wizard-steps-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 1rem; } .wizard-step { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(100,116,139,0.08); } .wizard-step:last-child { border-bottom: none; } .wizard-step.done { opacity: 0.55; } .wizard-step.future { opacity: 0.45; } .wizard-step.current { opacity: 1; background: rgba(167,139,250,0.04); margin: 0 -1.25rem; padding: 1rem 1.25rem; border-radius: 8px; border-bottom: none; } .wizard-step-marker { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .wizard-step-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.7rem; font-weight: 700; background: rgba(100,116,139,0.15); color: #64748b; border: 1px solid rgba(100,116,139,0.2); } .wizard-step-num.current { background: rgba(167,139,250,0.2); color: #c4b5fd; border-color: rgba(167,139,250,0.4); } .wizard-step-content { flex: 1; min-width: 0; } .wizard-step-text { font-size: 0.9rem; color: #e2e8f0; line-height: 1.45; } .wizard-step.done .wizard-step-text { text-decoration: line-through; text-decoration-color: rgba(100,116,139,0.4); color: #94a3b8; } /* Wizard responsive: stack on mobile */ @media (max-width: 768px) { .wizard-body { flex-direction: column; } .wizard-sidebar { flex: none; border-right: none; border-bottom: 1px solid rgba(100,116,139,0.15); padding: 1rem; } .wizard-nav-name { max-width: 160px; font-size: 0.9rem; } .wizard-nav-btn { padding: 0.4rem 0.6rem; font-size: 0.75rem; } .wizard-steps { padding: 1rem; } } /* Breach hero cards with cosmic accent */ .breach-hero-card { position: relative; transition: all 0.3s ease; } .breach-hero-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(168,213,229,0.4), transparent); opacity: 0; transition: opacity 0.3s; } .breach-hero-card:hover::after { opacity: 1; } /* Focus mission cards cosmic glow */ .focus-mission-card { position: relative; } .focus-mission-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.1) 0%, transparent 60%); pointer-events: none; } /* Platform cards cosmic border */ .platform-card { transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .platform-card:hover { border-color: var(--platform-color, rgba(168, 213, 229, 0.4)); box-shadow: 0 0 30px rgba(168, 213, 229, 0.1), 0 8px 25px rgba(0, 0, 0, 0.3); transform: translateY(-3px); } /* Security status cosmic variants */ .security-status-card.cosmic-alert { border-color: rgba(239, 68, 68, 0.4); background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0.95)); } .security-status-card.cosmic-warning { border-color: rgba(245, 158, 11, 0.4); background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(15, 23, 42, 0.95)); } .security-status-card.cosmic-secure { border-color: rgba(16, 185, 129, 0.4); background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.95)); } /* Cosmic suggestion cards */ .smart-suggestion-card { position: relative; overflow: hidden; } .smart-suggestion-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.05), transparent); transition: left 0.5s ease; } .smart-suggestion-card:hover::before { left: 100%; } /* Cosmic stat panels */ .sv-panel { position: relative; overflow: hidden; } .sv-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.2), transparent); } /* Report cards cosmic */ .report-card { transition: all 0.3s ease; } .report-card:hover { border-color: rgba(168, 213, 229, 0.3); transform: translateY(-2px); } /* Family member cards cosmic */ .member-card { transition: all 0.3s ease; } .member-card:hover { border-color: rgba(168, 213, 229, 0.3); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } /* Webhook cards cosmic */ .webhook-card { transition: all 0.3s ease; } .webhook-card:hover { border-color: rgba(168, 213, 229, 0.3); } /* Cosmic card content positioning */ .cosmic-content { position: relative; z-index: 10; } /* Cosmic tier badges */ .tier-badge { position: absolute; top: -10px; right: 20px; z-index: 20; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* Cosmic feature highlight backgrounds */ .crystal-cosmic-stellar .tier-feature.highlight { background: rgba(168, 213, 229, 0.08); } .crystal-cosmic-purple .tier-feature.highlight { background: rgba(167, 139, 250, 0.08); } .crystal-cosmic-gold .tier-feature.highlight { background: rgba(251, 191, 36, 0.08); } /* Cosmic section headers */ .cosmic-section-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: linear-gradient(90deg, rgba(168, 213, 229, 0.08), transparent); border-left: 3px solid var(--accent-cyan); margin-bottom: 1.5rem; border-radius: 0 8px 8px 0; } /* Cosmic divider */ .cosmic-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.3), transparent); margin: 2rem 0; } /* Cosmic empty states */ .cosmic-empty-state { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.8)); border: 1px dashed rgba(168, 213, 229, 0.2); border-radius: 16px; } .cosmic-empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto 1rem; opacity: 0.5; } /* Cosmic loading states */ .cosmic-loading { position: relative; overflow: hidden; } .cosmic-loading::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.1), transparent); animation: cosmic-shimmer 1.5s infinite; } @keyframes cosmic-shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Ensure crystal-cosmic cards respond to grid layouts */ .pricing-grid .crystal-cosmic, .plans-grid .crystal-cosmic { display: flex; flex-direction: column; height: 100%; padding: 0; /* Remove default padding to prevent nested card effect */ } .pricing-grid .crystal-cosmic .cosmic-content, .plans-grid .crystal-cosmic .cosmic-content { flex: 1; display: flex; flex-direction: column; padding: 0; /* Remove nested padding */ } /* Fix tier-header to extend to edges */ .pricing-grid .crystal-cosmic .tier-header, .plans-grid .crystal-cosmic .tier-header { margin: 0 !important; border-radius: 0 !important; } /* Content area inside cosmic cards */ .pricing-grid .crystal-cosmic .tier-price, .pricing-grid .crystal-cosmic .tier-feature, .pricing-grid .crystal-cosmic h3, .plans-grid .crystal-cosmic .tier-price, .plans-grid .crystal-cosmic .tier-feature, .plans-grid .crystal-cosmic h3 { padding-left: 1.5rem; padding-right: 1.5rem; } /* Buttons inside cosmic pricing cards */ .pricing-grid .crystal-cosmic .btn, .pricing-grid .crystal-cosmic a[href*="register"], .pricing-grid .crystal-cosmic a[href*="upgrade"], .plans-grid .crystal-cosmic .btn, .plans-grid .crystal-cosmic a[href*="register"], .plans-grid .crystal-cosmic a[href*="upgrade"] { margin: 0; border-radius: 0 !important; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); } /* Feature list padding */ .pricing-grid .crystal-cosmic > div[style*="color: #94a3b8"], .plans-grid .crystal-cosmic > div[style*="color: #94a3b8"] { padding: 0 1.5rem; } /* Responsive cosmic cards */ @media (max-width: 768px) { .tier-card-cosmic, .plan-card-cosmic { padding: 20px; min-height: auto; } .tier-card-cosmic .tier-header, .plan-card-cosmic .tier-header { margin: -20px -20px 16px -20px; padding: 14px 20px; } .cosmic-platform-link .cosmic-content { padding: 16px; } } /* High contrast mode support */ @media (prefers-contrast: high) { .crystal-cosmic { border: 2px solid currentColor; } .cosmic-stars, .cosmic-nebula { display: none; } } /* ============================================ FACETED BUTTON SYSTEM - Global Override Replaces rounded corners with gem-cut edges ============================================ */ /* CSS Custom Properties for faceted corners */ :root { --facet-btn-sm: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); --facet-btn-md: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); --facet-btn-lg: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); } /* Primary buttons - medium facet */ .btn, .btn-primary, .btn-hero, .btn-secondary, .btn-ghost, .btn-outline, .btn-purple, .btn-commander, .btn-upgrade, .btn-danger, .btn-success, .btn-warning, input[type="submit"].btn, button.btn { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Small buttons - small facet */ .btn-sm, .btn-small, .help-btn, .close-btn, .close-popup, .modal-close, .popup-close, .quick-btn-sm { border-radius: 0 !important; clip-path: var(--facet-btn-sm); } /* Large/Hero buttons - large facet */ .btn-lg, .btn-large, .btn-hero-lg, .cta-btn, .hero-cta, .tour-cta-btn, .feature-preview-cta { border-radius: 0 !important; clip-path: var(--facet-btn-lg); } /* Navigation buttons */ .gw-nav-cta, .gw-nav-login, .nav-cta, .nav-btn { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Sticky CTA bar buttons */ .sticky-cta-btn, .sticky-cta-btn.primary, .sticky-cta-btn.secondary { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Form buttons */ .form-btn, .submit-btn, input[type="submit"], input[type="button"], button[type="submit"], button[type="button"] { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Action buttons in cards/panels */ .card-btn, .panel-action, .action-btn, .sv-action-btn, .quick-action-btn, .guide-step-btn { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Dashboard specific buttons */ .scan-btn, .scan-action, .mission-btn, .claim-btn, .streak-claim-btn, .verify-btn, .link-btn, .unlink-btn, .expand-btn, .collapse-btn { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Pricing/Upgrade buttons */ .tier-btn, .upgrade-btn, .plan-btn, .subscribe-btn, .checkout-btn { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Marketing page buttons */ .mvp-btn-primary, .mvp-btn-secondary, .tour-btn, .demo-btn, .landing-cta { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Links styled as buttons */ a.btn, a.btn-primary, a.btn-secondary, a.cta-link, a[class*="btn-"] { border-radius: 0 !important; clip-path: var(--facet-btn-md); } /* Dropdown and toggle buttons - small facet */ .dropdown-toggle, .toggle-btn, .tab-btn, .filter-btn, .sort-btn, .header-view-btn { border-radius: 0 !important; clip-path: var(--facet-btn-sm); } /* Exception: Circular/icon-only buttons keep their shape */ .btn-icon, .btn-circle, .icon-btn, .add-credits-btn, .round-btn, [class*="-icon-btn"], .close-x, .modal-x { clip-path: none !important; /* Keep original border-radius for circular buttons */ } /* Exception: Pill-shaped badges/tags */ .badge, .tag, .chip, .tier-badge, .status-badge, .label-pill { clip-path: none !important; /* Keep pill shape for badges */ } /* Faceted input fields to match */ .input-faceted, input.faceted, select.faceted, textarea.faceted { border-radius: 0 !important; clip-path: var(--facet-btn-sm); } /* Button hover states maintain faceted shape */ .btn:hover, .btn-primary:hover, .btn-secondary:hover, .gw-nav-cta:hover, .sticky-cta-btn:hover { clip-path: var(--facet-btn-md); } /* Focus states for accessibility */ .btn:focus-visible, .gw-nav-cta:focus-visible, .sticky-cta-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } /* Disabled button states */ .btn:disabled, .btn.disabled, button:disabled { clip-path: var(--facet-btn-md); opacity: 0.5; cursor: not-allowed; } /* ============================================================================= ICON-SVG FALLBACK COLORS - Ensure icons are always visible ============================================================================= */ /* Base icon style with fallback color */ .icon-svg { stroke: #A8D5E5 !important; stroke-width: 1.75; } /* Gradient overrides via class - these override the fallback when gradients load */ .icon-svg.icon-gold { stroke: #fbbf24 !important; } .icon-svg.icon-success { stroke: #10b981 !important; } .icon-svg.icon-alert { stroke: #ef4444 !important; } .icon-svg.icon-eclipse { stroke: #a78bfa !important; } /* Sidebar icon enhancements */ .sidebar-link .icon-svg, .sidebar-link-icon .icon-svg, .sidebar-link-icon svg { width: 20px; height: 20px; stroke: #A8D5E5; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; } .sidebar-link:hover .icon-svg, .sidebar-link:hover .sidebar-link-icon svg { stroke: #e2e8f0; filter: drop-shadow(0 0 6px rgba(168, 213, 229, 0.6)); } .sidebar-link.active .icon-svg, .sidebar-link.active .sidebar-link-icon svg { stroke: #22d3ee; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5)); } /* ============================================================================= COSMIC POLISH v2 - Comprehensive Site-Wide Enhancements FIXED: Proper faceted borders using pseudo-elements (no cut corners) ============================================================================= */ /* ============================================================================= 1. HUB STATS - Faceted Design with Proper Borders ============================================================================= */ .hub-stat { --facet-size: 10px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; border: none !important; position: relative; background: linear-gradient(165deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease; } /* Faceted border using background on wrapper - visual only via gradient edge */ .hub-stat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(168, 213, 229, 0.15) 0%, rgba(168, 213, 229, 0.05) 50%, rgba(167, 139, 250, 0.1) 100%); clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size), 0 var(--facet-size), 1px calc(var(--facet-size) + 1px), calc(var(--facet-size) + 1px) 1px, calc(100% - var(--facet-size) - 1px) 1px, calc(100% - 1px) calc(var(--facet-size) + 1px), calc(100% - 1px) calc(100% - var(--facet-size) - 1px), calc(100% - var(--facet-size) - 1px) calc(100% - 1px), calc(var(--facet-size) + 1px) calc(100% - 1px), 1px calc(100% - var(--facet-size) - 1px), 1px calc(var(--facet-size) + 1px) ); pointer-events: none; z-index: 1; } /* Top accent line */ .hub-stat::after { content: ''; position: absolute; top: 1px; left: calc(var(--facet-size) + 4px); right: calc(var(--facet-size) + 4px); height: 2px; background: linear-gradient(90deg, var(--accent-cyan, #22d3ee), var(--accent-purple, #a78bfa)); opacity: 0.6; z-index: 2; } .hub-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 40px rgba(168, 213, 229, 0.08) !important; } .hub-stat:hover::before { background: linear-gradient(135deg, rgba(168, 213, 229, 0.25) 0%, rgba(168, 213, 229, 0.1) 50%, rgba(167, 139, 250, 0.15) 100%); } /* ============================================================================= 2. HUB ALERTS - Faceted with Left Accent (No border clip issues) ============================================================================= */ .hub-alert { --facet-size: 12px; --alert-color: var(--accent-cyan, #22d3ee); clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; border: none !important; position: relative; background: linear-gradient(135deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%) !important; } /* Left accent - positioned inside the facet cut */ .hub-alert::before { content: ''; position: absolute; left: 1px; top: calc(var(--facet-size) + 2px); bottom: calc(var(--facet-size) + 2px); width: 3px; background: var(--alert-color); border-radius: 0 2px 2px 0; z-index: 2; } /* Edge highlight */ .hub-alert::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--alert-color) 0%, transparent 30%); opacity: 0.08; clip-path: inherit; pointer-events: none; } .hub-alert.info { --alert-color: #60a5fa; } .hub-alert.success { --alert-color: #10b981; } .hub-alert.warning { --alert-color: #f59e0b; } .hub-alert.danger { --alert-color: #ef4444; } /* ============================================================================= 3. BREACH CARDS - Enhanced with Risk-Colored Accents ============================================================================= */ .breach-entry { --facet-size: 12px; --breach-color: #64748b; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; border: none !important; position: relative; transition: all 0.3s ease; } /* Top accent gradient */ .breach-entry::before { content: ''; position: absolute; top: 1px; left: calc(var(--facet-size) + 2px); right: calc(var(--facet-size) + 2px); height: 2px; background: linear-gradient(90deg, var(--breach-color), transparent 80%); opacity: 0.6; transition: opacity 0.3s; z-index: 2; } /* Corner glow effect */ .breach-entry::after { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; background: radial-gradient(circle at 0 0, var(--breach-color) 0%, transparent 70%); opacity: 0.1; clip-path: inherit; pointer-events: none; transition: opacity 0.3s; } .breach-entry:hover::before, .breach-entry[open]::before { opacity: 1; } .breach-entry:hover::after, .breach-entry[open]::after { opacity: 0.2; } .breach-entry.risk-high-card { --breach-color: #ef4444; } .breach-entry.risk-medium-card { --breach-color: #f59e0b; } .breach-entry.risk-low-card { --breach-color: #10b981; } .breach-entry.risk-unknown-card { --breach-color: #6b7280; } .breach-entry:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 40px color-mix(in srgb, var(--breach-color) 15%, transparent) !important; } /* ============================================================================= 4. FORM INPUTS - Faceted with Focus Glow (No border needed) ============================================================================= */ input.form-input, input.cosmic-input, textarea.form-input, textarea.cosmic-input, select.form-input, select.cosmic-input, .settings-section input[type="text"], .settings-section input[type="email"], .settings-section input[type="password"], .settings-section textarea { --facet-size: 6px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; background: rgba(15, 23, 42, 0.9) !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.3); transition: all 0.3s ease; } input.form-input:focus, input.cosmic-input:focus, textarea.form-input:focus, textarea.cosmic-input:focus, select.form-input:focus, select.cosmic-input:focus, .settings-section input:focus, .settings-section textarea:focus { box-shadow: inset 0 0 0 1px rgba(168, 213, 229, 0.5), 0 0 20px rgba(168, 213, 229, 0.15) !important; outline: none !important; } /* ============================================================================= 5. SETTINGS SECTIONS - Faceted Cards ============================================================================= */ .settings-section { --facet-size: 14px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; position: relative; background: linear-gradient(160deg, rgba(12, 18, 28, 0.98) 0%, rgba(8, 12, 22, 0.99) 100%) !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3); } /* Top accent line */ .settings-section::before { content: ''; position: absolute; top: 1px; left: calc(var(--facet-size) + 4px); right: calc(var(--facet-size) + 4px); height: 2px; background: linear-gradient(90deg, var(--accent-cyan, #22d3ee), var(--accent-purple, #a78bfa)); opacity: 0.5; z-index: 2; } /* ============================================================================= 6. MODAL/DIALOG - Faceted Design ============================================================================= */ .modal-content, .dialog-content, .gw-modal { --facet-size: 16px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; border: none !important; background: linear-gradient(160deg, rgba(12, 18, 28, 0.99) 0%, rgba(8, 12, 22, 1) 100%) !important; box-shadow: inset 0 0 0 1px rgba(168, 213, 229, 0.15), 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 100px rgba(168, 213, 229, 0.05) !important; } /* ============================================================================= 7. TOAST NOTIFICATIONS - Faceted with Side Accent ============================================================================= */ .toast, .notification-toast, #toast-container .toast { --facet-size: 8px; --toast-color: var(--accent-cyan, #22d3ee); clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; border: none !important; position: relative; background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 14, 22, 0.99) 100%) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 40px color-mix(in srgb, var(--toast-color) 15%, transparent) !important; } /* Left accent bar - inside facet bounds */ .toast::before, .notification-toast::before, #toast-container .toast::before { content: ''; position: absolute; left: 1px; top: calc(var(--facet-size) + 2px); bottom: calc(var(--facet-size) + 2px); width: 3px; background: var(--toast-color); border-radius: 0 2px 2px 0; z-index: 2; } .toast.success, .toast-success { --toast-color: #10b981; } .toast.error, .toast-error { --toast-color: #ef4444; } .toast.warning, .toast-warning { --toast-color: #f59e0b; } .toast.info, .toast-info { --toast-color: #60a5fa; } /* ============================================================================= 8. EMPTY STATES - Faceted with Dashed Effect via Background ============================================================================= */ .empty-state, .no-data, .no-results { --facet-size: 14px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; background: repeating-linear-gradient( 90deg, rgba(100, 116, 139, 0.2) 0px, rgba(100, 116, 139, 0.2) 8px, transparent 8px, transparent 16px ), linear-gradient(160deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%) !important; background-size: 100% 1px, 100% 100%; background-position: top, center; background-repeat: repeat-x, no-repeat; position: relative; } /* Radial glow */ .empty-state::before, .no-data::before, .no-results::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(168, 213, 229, 0.05) 0%, transparent 60%); pointer-events: none; } /* ============================================================================= 9. MISSION CARDS - Faceted with Left Gradient ============================================================================= */ .mission-preview-card, .mission-locked { --facet-size: 10px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%); } /* Left accent - inside facet bounds */ .mission-preview-card::before, .mission-locked::before { content: ''; position: absolute; left: 1px; top: calc(var(--facet-size) + 2px); bottom: calc(var(--facet-size) + 2px); width: 3px; background: linear-gradient(180deg, #a78bfa, #8b5cf6); border-radius: 0 2px 2px 0; z-index: 2; } /* ============================================================================= 10. PROGRESS BARS - Faceted Design ============================================================================= */ .progress-bar, .xp-bar, .completion-bar { clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); border-radius: 0 !important; overflow: hidden; } .progress-bar-fill, .xp-bar-fill, .completion-bar-fill { clip-path: inherit; position: relative; } .progress-bar-fill::after, .xp-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%); } /* ============================================================================= 11. GENERIC .btn - Faceted Enhancement (non-destructive) ============================================================================= */ .btn:not(.btn-icon):not(.btn-circle):not(.btn-round) { clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); border-radius: 0 !important; position: relative; overflow: hidden; } .btn:not(.btn-icon):not(.btn-circle):not(.btn-round)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%); pointer-events: none; } .btn:not(.btn-icon):not(.btn-circle):not(.btn-round):hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* ============================================================================= 12. ALERT BANNERS - Faceted with Proper Accent ============================================================================= */ .alert-banner, .alert:not(.toast), .notice-banner { --facet-size: 10px; --alert-accent: var(--accent-cyan, #22d3ee); clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; position: relative; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%); } /* Left accent inside facet bounds */ .alert-banner::before, .alert:not(.toast)::before { content: ''; position: absolute; left: 1px; top: calc(var(--facet-size) + 2px); bottom: calc(var(--facet-size) + 2px); width: 3px; background: var(--alert-accent); border-radius: 0 2px 2px 0; z-index: 2; } /* Edge glow overlay */ .alert-banner::after, .alert:not(.toast)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--alert-accent) 0%, transparent 30%); opacity: 0.08; clip-path: inherit; pointer-events: none; } .alert-banner.success, .alert.success:not(.toast) { --alert-accent: #10b981; } .alert-banner.warning, .alert.warning:not(.toast) { --alert-accent: #f59e0b; } .alert-banner.error, .alert.error:not(.toast), .alert-banner.danger, .alert.danger:not(.toast) { --alert-accent: #ef4444; } .alert-banner.info, .alert.info:not(.toast) { --alert-accent: #60a5fa; } /* ============================================================================= 13. DROPDOWN MENUS - Faceted with Inset Border Effect ============================================================================= */ .dropdown-menu, .dropdown-content, .context-menu { --facet-size: 8px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; border: none !important; background: linear-gradient(160deg, rgba(15, 23, 42, 0.99) 0%, rgba(10, 14, 22, 1) 100%) !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.2), 0 8px 30px rgba(0, 0, 0, 0.5) !important; } /* ============================================================================= 14. CARDS GENERIC - Faceted with Subtle Border ============================================================================= */ .gw-card, .card:not(.plan-card-cosmic):not(.platform-card), .panel { --facet-size: 12px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.15); } /* ============================================================================= 15. TABLE STYLING - Faceted Container ============================================================================= */ .data-table, .comparison-table, table.cosmic { --facet-size: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.15); } .data-table thead, .comparison-table thead, table.cosmic thead { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%); } .data-table thead th:first-child, .comparison-table thead th:first-child, table.cosmic thead th:first-child { clip-path: polygon(var(--facet-size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--facet-size)); } .data-table thead th:last-child, .comparison-table thead th:last-child, table.cosmic thead th:last-child { clip-path: polygon(0 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% 100%, 0 100%); } /* ============================================================================= COSMIC ANIMATIONS ============================================================================= */ /* Subtle pulse for important elements */ @keyframes cosmicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 213, 229, 0); } 50% { box-shadow: 0 0 20px 2px rgba(168, 213, 229, 0.15); } } .cosmic-pulse { animation: cosmicPulse 3s ease-in-out infinite; } /* Shimmer effect for loading states */ @keyframes cosmicShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .cosmic-shimmer { background: linear-gradient( 90deg, rgba(168, 213, 229, 0.05) 0%, rgba(168, 213, 229, 0.15) 50%, rgba(168, 213, 229, 0.05) 100% ); background-size: 200% 100%; animation: cosmicShimmer 2s linear infinite; } /* Glow effect for hover states */ @keyframes cosmicGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(168, 213, 229, 0.3)); } 50% { filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.5)); } } .cosmic-glow { animation: cosmicGlow 2s ease-in-out infinite; } /* Status indicator animations */ @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } .status-indicator.pulsing { animation: statusPulse 2s ease-in-out infinite; } /* Corner accent hover reveal */ .cosmic-corner-reveal { position: relative; overflow: hidden; } .cosmic-corner-reveal::after { content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: radial-gradient( circle at 100% 0%, rgba(168, 213, 229, 0.15) 0%, transparent 70% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .cosmic-corner-reveal:hover::after { opacity: 1; } /* ============================================================================= RESPONSIVE ADJUSTMENTS FOR FACETED ELEMENTS ============================================================================= */ @media (max-width: 768px) { /* Reduce facet sizes on mobile for better touch targets */ .hub-stat, .breach-entry, .settings-section, .empty-state, .hub-alert, .mission-preview-card, .mission-locked { --facet-size: 8px !important; } .btn:not(.btn-icon):not(.btn-circle):not(.btn-round) { --facet-size: 4px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); } .toast, .notification-toast, #toast-container .toast { --facet-size: 6px !important; } .dropdown-menu, .dropdown-content, .context-menu { --facet-size: 6px !important; } } /* ============================================================================= COSMIC POLISH v3 - Additional UI Enhancements ============================================================================= */ /* ============================================================================= 16. TOOLTIPS - Faceted with Pointer ============================================================================= */ .tooltip-content, [data-tooltip]::after, .gw-tooltip { --facet-size: 6px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); background: linear-gradient(160deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important; border: none !important; box-shadow: inset 0 0 0 1px rgba(168, 213, 229, 0.2), 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 213, 229, 0.05) !important; } .tooltip-icon { --facet-size: 4px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; background: linear-gradient(135deg, rgba(100, 116, 139, 0.3), rgba(100, 116, 139, 0.2)) !important; transition: all 0.2s ease; } .tooltip-icon:hover { background: linear-gradient(135deg, rgba(168, 213, 229, 0.3), rgba(168, 213, 229, 0.2)) !important; box-shadow: 0 0 12px rgba(168, 213, 229, 0.3); } /* ============================================================================= 17. CUSTOM CHECKBOXES - Faceted Design ============================================================================= */ .custom-checkbox, .cosmic-checkbox { --facet-size: 4px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; background: rgba(15, 23, 42, 0.9) !important; border: none !important; box-shadow: inset 0 0 0 2px rgba(100, 116, 139, 0.4); transition: all 0.2s ease; } .custom-checkbox:hover, .cosmic-checkbox:hover { box-shadow: inset 0 0 0 2px rgba(168, 213, 229, 0.5), 0 0 15px rgba(168, 213, 229, 0.1); } input:checked + .custom-checkbox, input:checked + .cosmic-checkbox { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.8), 0 0 15px rgba(16, 185, 129, 0.3); } /* ============================================================================= 18. TOGGLE SWITCHES - Faceted Track ============================================================================= */ .toggle-switch, .cosmic-toggle { --facet-size: 4px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; background: rgba(30, 41, 59, 0.9) !important; border: none !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.3); position: relative; transition: all 0.3s ease; } .toggle-switch.active, .cosmic-toggle.active, input:checked + .toggle-switch, input:checked + .cosmic-toggle { background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.2)) !important; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.15); } /* Toggle knob - hexagonal */ .toggle-switch::after, .cosmic-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(50% - 4px); height: calc(100% - 4px); background: linear-gradient(135deg, #475569, #334155); clip-path: polygon( 3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px ); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .toggle-switch.active::after, .cosmic-toggle.active::after, input:checked + .toggle-switch::after, input:checked + .cosmic-toggle::after { left: calc(50% + 2px); background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); } /* ============================================================================= 19. SPINNERS/LOADERS - Faceted Ring ============================================================================= */ .gw-spinner, .cosmic-spinner { border: none !important; background: none !important; position: relative; } .gw-spinner::before, .cosmic-spinner::before { content: ''; position: absolute; inset: 0; border: 3px solid rgba(168, 213, 229, 0.1); clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); } .gw-spinner::after, .cosmic-spinner::after { content: ''; position: absolute; inset: 0; border: 3px solid transparent; border-top-color: var(--accent-cyan, #22d3ee); border-right-color: var(--accent-purple, #a78bfa); clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); animation: cosmicSpin 0.8s linear infinite; } @keyframes cosmicSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================================= 20. TAGS/CHIPS/LABELS - Faceted Hexagonal ============================================================================= */ .tag, .chip, .label:not(label), .cosmic-tag { --facet-size: 5px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% 50%, calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 50% ); border-radius: 0 !important; padding: 0.25rem 0.75rem 0.25rem 0.5rem !important; background: linear-gradient(135deg, rgba(100, 116, 139, 0.3), rgba(100, 116, 139, 0.2)) !important; border: none !important; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .tag.success, .chip.success, .cosmic-tag.success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.15)) !important; color: #34d399; } .tag.warning, .chip.warning, .cosmic-tag.warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.15)) !important; color: #fbbf24; } .tag.danger, .chip.danger, .cosmic-tag.danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15)) !important; color: #f87171; } .tag.info, .chip.info, .cosmic-tag.info { background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.15)) !important; color: #93c5fd; } .tag.premium, .chip.premium, .cosmic-tag.premium { background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.15)) !important; color: #fcd34d; } /* ============================================================================= 21. AVATARS - Faceted Hexagonal ============================================================================= */ .avatar, .user-avatar, .cosmic-avatar { --facet-size: 8px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; position: relative; overflow: hidden; } .avatar::after, .user-avatar::after, .cosmic-avatar::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(168, 213, 229, 0.2); clip-path: inherit; pointer-events: none; } /* Status ring for online/offline */ .avatar.online::before { content: ''; position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #10b981; clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); z-index: 2; } /* ============================================================================= 22. SEARCH INPUTS - Faceted with Icon ============================================================================= */ .search-input, .search-box input, input[type="search"] { --facet-size: 8px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; border: none !important; background: rgba(15, 23, 42, 0.9) !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.3); padding-left: 2.5rem !important; } .search-input:focus, .search-box input:focus, input[type="search"]:focus { box-shadow: inset 0 0 0 1px rgba(168, 213, 229, 0.5), 0 0 20px rgba(168, 213, 229, 0.1) !important; outline: none !important; } .search-box { position: relative; } .search-box::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; z-index: 2; } /* ============================================================================= 23. BREADCRUMBS - Faceted Segments ============================================================================= */ .breadcrumb, .cosmic-breadcrumb { display: flex; align-items: center; gap: 0; padding: 0.5rem 0; } .breadcrumb-item, .cosmic-breadcrumb-item { --facet-size: 4px; padding: 0.4rem 1rem 0.4rem 1.25rem; background: rgba(30, 41, 59, 0.6); color: #94a3b8; font-size: 0.85rem; position: relative; clip-path: polygon( 0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50% ); margin-left: -8px; transition: all 0.2s ease; } .breadcrumb-item:first-child { margin-left: 0; clip-path: polygon( 0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100% ); padding-left: 1rem; } .breadcrumb-item:last-child { background: linear-gradient(135deg, rgba(168, 213, 229, 0.15), rgba(168, 213, 229, 0.05)); color: #e2e8f0; } .breadcrumb-item:hover:not(:last-child) { background: rgba(168, 213, 229, 0.1); color: #e2e8f0; } .breadcrumb-item a { color: inherit; text-decoration: none; } /* ============================================================================= 24. FOOTER - Cosmic Enhancement ============================================================================= */ .footer { position: relative; margin-top: 4rem !important; padding: 2rem 1rem !important; } .footer::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.3), transparent); } .footer a { position: relative; transition: all 0.2s ease; } .footer a:hover { color: var(--accent-cyan, #22d3ee) !important; text-shadow: 0 0 10px rgba(168, 213, 229, 0.3); } /* ============================================================================= 25. NOTIFICATION BADGES - Pulsing Faceted ============================================================================= */ .notification-badge, .badge-count, .unread-count { --facet-size: 3px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: white !important; font-weight: 700; font-size: 0.7rem; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; animation: badgePulse 2s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); } } /* ============================================================================= 26. ACCORDIONS/DETAILS - Faceted with Animated Arrow ============================================================================= */ details.cosmic-accordion, .accordion-item { --facet-size: 10px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); background: linear-gradient(160deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%); border: none !important; margin-bottom: 0.5rem; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.15); transition: all 0.3s ease; } details.cosmic-accordion[open], .accordion-item.open { box-shadow: inset 0 0 0 1px rgba(168, 213, 229, 0.2), 0 4px 20px rgba(0, 0, 0, 0.3); } details.cosmic-accordion > summary, .accordion-header { padding: 1rem 1.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; font-weight: 600; color: #e2e8f0; } details.cosmic-accordion > summary::-webkit-details-marker { display: none; } details.cosmic-accordion > summary::after, .accordion-header::after { content: ''; width: 10px; height: 10px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(-45deg); transition: transform 0.3s ease; } details.cosmic-accordion[open] > summary::after, .accordion-item.open .accordion-header::after { transform: rotate(45deg); } .accordion-content { padding: 0 1.25rem 1rem; color: #94a3b8; } /* ============================================================================= 27. STEP INDICATORS - Faceted Progress ============================================================================= */ .step-indicator, .cosmic-steps { display: flex; align-items: center; gap: 0; } .step-item { --facet-size: 6px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(30, 41, 59, 0.6); color: #64748b; position: relative; clip-path: polygon( 0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50% ); margin-left: -10px; } .step-item:first-child { margin-left: 0; clip-path: polygon( 0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100% ); } .step-item.completed { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); color: #10b981; } .step-item.active { background: linear-gradient(135deg, rgba(168, 213, 229, 0.2), rgba(168, 213, 229, 0.1)); color: #e2e8f0; } .step-number { --facet-size: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(100, 116, 139, 0.3); clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); font-size: 0.75rem; font-weight: 700; } .step-item.completed .step-number { background: linear-gradient(135deg, #10b981, #059669); color: white; } .step-item.active .step-number { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); color: white; box-shadow: 0 0 15px rgba(168, 213, 229, 0.4); } /* ============================================================================= 28. RANGE SLIDERS - Faceted Track ============================================================================= */ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 100%; } input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: rgba(30, 41, 59, 0.9); clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: linear-gradient(135deg, var(--accent-cyan, #22d3ee), var(--accent-purple, #a78bfa)); clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); margin-top: -6px; box-shadow: 0 0 15px rgba(168, 213, 229, 0.4); transition: all 0.2s ease; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(168, 213, 229, 0.6); } input[type="range"]::-moz-range-track { height: 8px; background: rgba(30, 41, 59, 0.9); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: linear-gradient(135deg, var(--accent-cyan, #22d3ee), var(--accent-purple, #a78bfa)); border: none; border-radius: 0; } /* ============================================================================= 29. RADIO BUTTONS - Faceted Hexagonal ============================================================================= */ .cosmic-radio, input[type="radio"] + .radio-custom { --facet-size: 4px; width: 20px; height: 20px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); background: rgba(15, 23, 42, 0.9); box-shadow: inset 0 0 0 2px rgba(100, 116, 139, 0.4); position: relative; transition: all 0.2s ease; } input[type="radio"]:checked + .radio-custom, .cosmic-radio.selected { background: rgba(15, 23, 42, 0.9); box-shadow: inset 0 0 0 2px rgba(168, 213, 229, 0.6); } input[type="radio"]:checked + .radio-custom::after, .cosmic-radio.selected::after { content: ''; position: absolute; inset: 5px; background: linear-gradient(135deg, var(--accent-cyan, #22d3ee), var(--accent-purple, #a78bfa)); clip-path: inherit; box-shadow: 0 0 10px rgba(168, 213, 229, 0.5); } /* ============================================================================= 30. COMMAND CENTER WIDGET - Enhanced ============================================================================= */ .cc-btn { --facet-size: 12px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; } .cc-panel { --facet-size: 16px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ) !important; border-radius: 0 !important; } .cc-tab { --facet-size: 4px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; } .cc-next-step { --facet-size: 10px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; } .cc-stat { --facet-size: 6px; clip-path: polygon( var(--facet-size) 0, calc(100% - var(--facet-size)) 0, 100% var(--facet-size), 100% calc(100% - var(--facet-size)), calc(100% - var(--facet-size)) 100%, var(--facet-size) 100%, 0 calc(100% - var(--facet-size)), 0 var(--facet-size) ); border-radius: 0 !important; } /* ============================================================================= PREMIUM FLOATING PARTICLES - CSS Only (GPU Accelerated) ============================================================================= */ .particles { --particle-color-1: rgba(168, 213, 229, 0.4); --particle-color-2: rgba(139, 92, 246, 0.35); --particle-color-3: rgba(96, 165, 250, 0.3); } /* Generate floating particles with CSS */ .particles::before, .particles::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .particles::before { background-image: radial-gradient(2px 2px at 10% 20%, var(--particle-color-1), transparent), radial-gradient(2px 2px at 25% 45%, var(--particle-color-2), transparent), radial-gradient(3px 3px at 40% 15%, var(--particle-color-1), transparent), radial-gradient(2px 2px at 55% 70%, var(--particle-color-3), transparent), radial-gradient(2px 2px at 70% 35%, var(--particle-color-2), transparent), radial-gradient(3px 3px at 85% 60%, var(--particle-color-1), transparent), radial-gradient(2px 2px at 15% 80%, var(--particle-color-3), transparent), radial-gradient(2px 2px at 35% 90%, var(--particle-color-2), transparent), radial-gradient(2px 2px at 60% 5%, var(--particle-color-1), transparent), radial-gradient(3px 3px at 90% 85%, var(--particle-color-2), transparent); background-size: 100% 100%; animation: particleDrift1 25s ease-in-out infinite; opacity: 0.8; } .particles::after { background-image: radial-gradient(2px 2px at 5% 50%, var(--particle-color-2), transparent), radial-gradient(3px 3px at 20% 10%, var(--particle-color-1), transparent), radial-gradient(2px 2px at 45% 85%, var(--particle-color-3), transparent), radial-gradient(2px 2px at 65% 25%, var(--particle-color-1), transparent), radial-gradient(2px 2px at 80% 95%, var(--particle-color-2), transparent), radial-gradient(3px 3px at 95% 40%, var(--particle-color-3), transparent), radial-gradient(2px 2px at 30% 65%, var(--particle-color-1), transparent), radial-gradient(2px 2px at 50% 30%, var(--particle-color-2), transparent), radial-gradient(2px 2px at 75% 75%, var(--particle-color-3), transparent), radial-gradient(2px 2px at 12% 95%, var(--particle-color-1), transparent); background-size: 100% 100%; animation: particleDrift2 30s ease-in-out infinite reverse; opacity: 0.6; } @keyframes particleDrift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; } 25% { transform: translate3d(15px, -25px, 0) scale(1.02); opacity: 0.9; } 50% { transform: translate3d(-10px, -40px, 0) scale(0.98); opacity: 0.7; } 75% { transform: translate3d(20px, -15px, 0) scale(1.01); opacity: 0.85; } } @keyframes particleDrift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; } 33% { transform: translate3d(-20px, 30px, 0) scale(1.03); opacity: 0.7; } 66% { transform: translate3d(25px, 10px, 0) scale(0.97); opacity: 0.5; } } /* Shooting stars effect */ .shooting-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .shooting-stars::before, .shooting-stars::after { content: ''; position: absolute; width: 100px; height: 2px; background: linear-gradient(90deg, rgba(168, 213, 229, 0.8), transparent); border-radius: 50%; animation: shootingStar 8s ease-in-out infinite; opacity: 0; } .shooting-stars::before { top: 15%; left: -100px; animation-delay: 0s; } .shooting-stars::after { top: 45%; left: -100px; animation-delay: 4s; } @keyframes shootingStar { 0% { transform: translateX(0) translateY(0) rotate(-35deg); opacity: 0; } 5% { opacity: 1; } 15% { transform: translateX(calc(100vw + 200px)) translateY(150px) rotate(-35deg); opacity: 0; } 100% { transform: translateX(calc(100vw + 200px)) translateY(150px) rotate(-35deg); opacity: 0; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { .cyber-bg::before, .cyber-bg::after, .cyber-grid, .cyber-grid::before, .particles::before, .particles::after, .nebula-layer, .shooting-stars::before, .shooting-stars::after { animation: none !important; } } /* Mobile optimization - lighter effects */ @media (max-width: 768px) { .cyber-bg::before, .cyber-bg::after { animation-duration: 30s; } .particles::before, .particles::after { opacity: 0.5; animation-duration: 40s; } .shooting-stars::before, .shooting-stars::after { display: none; } .nebula-layer { opacity: 0.4; animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* FLICKERING FIX - Keep premium, fix performance */ /* ═══════════════════════════════════════════════════════════════════════════ */ /* Remove shooting stars - too distracting */ .shooting-stars { display: none !important; } /* Fix flickering with proper GPU compositing - keep original animations */ .cyber-bg, .cyber-bg::before, .cyber-bg::after, .cyber-grid, .particles, .particles::before, .particles::after, .nebula-layer { /* Force dedicated GPU layer - prevents flickering from layer promotion/demotion */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Hint to browser what will change */ will-change: transform, opacity; } /* Smooth out the nebula animation - remove scale which causes flicker */ @keyframes nebulaShift { 0% { opacity: 0.6; transform: translate3d(0, 0, 0); } 100% { opacity: 0.9; transform: translate3d(10px, -10px, 0); } } /* Particles - use translate3d instead of translate for GPU acceleration */ @keyframes particleDrift1 { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.8; } 25% { transform: translate3d(15px, -25px, 0); opacity: 0.9; } 50% { transform: translate3d(-10px, -40px, 0); opacity: 0.7; } 75% { transform: translate3d(20px, -15px, 0); opacity: 0.85; } } @keyframes particleDrift2 { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.6; } 33% { transform: translate3d(-20px, 30px, 0); opacity: 0.7; } 66% { transform: translate3d(25px, 10px, 0); opacity: 0.5; } } /* Ensure contain: layout on fixed backgrounds to prevent reflow */ .cyber-bg, .cyber-grid, .particles, .nebula-layer { contain: layout style; } /* ═══════════════════════════════════════════════════════════════════════════════ IDENTITY BURN LEVEL SYSTEM Detection and migration guidance for compromised identities ═══════════════════════════════════════════════════════════════════════════════ */ /* ============================================================================= BURN LEVEL BADGE ============================================================================= */ .burn-level-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 6px; font-family: 'Exo 2', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .burn-level-badge.burn-safe { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .burn-level-badge.burn-moderate { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .burn-level-badge.burn-heavy { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } .burn-level-badge.burn-critical { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.25)); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.5); animation: burnPulse 2s ease-in-out infinite; } @keyframes burnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 15px 2px rgba(239, 68, 68, 0.3); } } .burn-level-badge svg { width: 14px; height: 14px; } /* ============================================================================= IDENTITY COMPROMISED PANEL ============================================================================= */ .identity-compromised-panel { position: relative; background: linear-gradient(160deg, rgba(15, 10, 10, 0.98), rgba(20, 8, 8, 0.99)); border-radius: 16px; overflow: hidden; margin: 1.5rem 0; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(239, 68, 68, 0.1); } /* Animated warning bar at top */ .identity-compromised-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ef4444 0%, #f97316 25%, #ef4444 50%, #dc2626 75%, #ef4444 100% ); background-size: 200% 100%; animation: burnBar 3s linear infinite; } @keyframes burnBar { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* Fire/smoke effect background */ .identity-compromised-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 80%, rgba(239, 68, 68, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(249, 115, 22, 0.08) 0%, transparent 40%); pointer-events: none; z-index: 0; } .identity-compromised-content { position: relative; z-index: 1; padding: 1.5rem; } /* Header section */ .identity-compromised-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; } .identity-burn-icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15)); border-radius: 12px; position: relative; } .identity-burn-icon::before { content: ''; position: absolute; inset: -2px; background: conic-gradient(from 0deg, rgba(239, 68, 68, 0.5), rgba(249, 115, 22, 0.3), rgba(239, 68, 68, 0.5)); border-radius: inherit; z-index: -1; animation: burnIconRotate 4s linear infinite; } @keyframes burnIconRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .identity-burn-icon svg { width: 28px; height: 28px; color: #ef4444; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)); } .identity-compromised-title { font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 700; color: #fca5a5; margin-bottom: 0.25rem; } .identity-compromised-subtitle { font-size: 0.9rem; color: #94a3b8; line-height: 1.5; } .identity-compromised-subtitle strong { color: #ef4444; } /* Stats row */ .identity-burn-stats { display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .identity-burn-stat { flex: 1; min-width: 100px; padding: 0.75rem; background: rgba(0, 0, 0, 0.3); border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.15); text-align: center; } .identity-burn-stat-value { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; color: #ef4444; line-height: 1; margin-bottom: 0.25rem; } .identity-burn-stat-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } /* Explanation box */ .identity-burn-explanation { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem; } .identity-burn-explanation p { font-size: 0.85rem; color: #cbd5e1; line-height: 1.6; margin: 0; } .identity-burn-explanation p + p { margin-top: 0.75rem; } .identity-burn-explanation strong { color: #fca5a5; } /* Decision section */ .identity-decision-section { border-top: 1px solid rgba(100, 116, 139, 0.15); padding-top: 1.25rem; } .identity-decision-title { font-family: 'Exo 2', sans-serif; font-size: 0.9rem; font-weight: 600; color: #e2e8f0; margin-bottom: 1rem; text-align: center; } .identity-decision-options { display: flex; flex-direction: column; gap: 0.75rem; } /* Primary option - Start Fresh */ .identity-option { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; width: 100%; text-align: left; } .identity-option.option-primary { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.1)); border: 2px solid rgba(16, 185, 129, 0.4); } .identity-option.option-primary:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(34, 197, 94, 0.15)); border-color: rgba(16, 185, 129, 0.6); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2); } .identity-option.option-secondary { background: rgba(100, 116, 139, 0.08); border: 1px solid rgba(100, 116, 139, 0.2); } .identity-option.option-secondary:hover { background: rgba(100, 116, 139, 0.12); border-color: rgba(100, 116, 139, 0.3); } .identity-option-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .identity-option.option-primary .identity-option-icon { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15)); } .identity-option.option-primary .identity-option-icon svg { color: #10b981; } .identity-option.option-secondary .identity-option-icon { background: rgba(100, 116, 139, 0.15); } .identity-option.option-secondary .identity-option-icon svg { color: #64748b; } .identity-option-icon svg { width: 22px; height: 22px; } .identity-option-content { flex: 1; } .identity-option-title { font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.2rem; } .identity-option.option-primary .identity-option-title { color: #10b981; } .identity-option.option-secondary .identity-option-title { color: #94a3b8; } .identity-option-desc { font-size: 0.8rem; color: #64748b; } .identity-option-badge { padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .identity-option.option-primary .identity-option-badge { background: linear-gradient(135deg, #10b981, #059669); color: white; } .identity-option.option-secondary .identity-option-badge { background: rgba(100, 116, 139, 0.2); color: #64748b; } /* Arrow indicator */ .identity-option-arrow { color: #64748b; transition: transform 0.2s ease; } .identity-option:hover .identity-option-arrow { transform: translateX(4px); } .identity-option.option-primary .identity-option-arrow { color: #10b981; } /* ============================================================================= START FRESH WIZARD / MODAL ============================================================================= */ .start-fresh-wizard { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .start-fresh-wizard.active { opacity: 1; visibility: visible; } .start-fresh-container { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: linear-gradient(160deg, rgba(15, 23, 42, 0.99), rgba(10, 15, 30, 0.99)); border-radius: 20px; position: relative; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(16, 185, 129, 0.1); transform: scale(0.95) translateY(20px); transition: transform 0.3s ease; } .start-fresh-wizard.active .start-fresh-container { transform: scale(1) translateY(0); } /* Top accent */ .start-fresh-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #10b981, #34d399, #22d3ee, #10b981); border-radius: 20px 20px 0 0; } .start-fresh-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(100, 116, 139, 0.1); border: none; border-radius: 8px; color: #64748b; cursor: pointer; transition: all 0.2s ease; z-index: 10; } .start-fresh-close:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .start-fresh-header { padding: 2rem 2rem 1rem; text-align: center; } .start-fresh-icon { width: 72px; height: 72px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(34, 197, 94, 0.15)); border-radius: 16px; position: relative; } .start-fresh-icon::before { content: ''; position: absolute; inset: -3px; background: conic-gradient(from 0deg, rgba(16, 185, 129, 0.4), rgba(34, 211, 238, 0.2), rgba(16, 185, 129, 0.4)); border-radius: inherit; z-index: -1; animation: freshIconGlow 3s linear infinite; } @keyframes freshIconGlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .start-fresh-icon svg { width: 36px; height: 36px; color: #10b981; } .start-fresh-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin-bottom: 0.5rem; } .start-fresh-subtitle { font-size: 0.9rem; color: #94a3b8; } /* Steps */ .start-fresh-steps { padding: 0 2rem 1.5rem; } .start-fresh-step { display: none; } .start-fresh-step.active { display: block; animation: stepFadeIn 0.3s ease; } @keyframes stepFadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .start-fresh-step-title { font-family: 'Exo 2', sans-serif; font-size: 1rem; font-weight: 600; color: #10b981; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .start-fresh-step-num { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, 0.2); border-radius: 6px; font-size: 0.75rem; font-weight: 700; } .start-fresh-step-content { color: #cbd5e1; font-size: 0.9rem; line-height: 1.6; } .start-fresh-step-content ul { margin: 0.75rem 0; padding-left: 1.25rem; } .start-fresh-step-content li { margin-bottom: 0.5rem; } .start-fresh-step-content li::marker { color: #10b981; } /* Input fields in wizard */ .start-fresh-input-group { margin: 1rem 0; } .start-fresh-input-label { display: block; font-size: 0.8rem; font-weight: 600; color: #94a3b8; margin-bottom: 0.5rem; } .start-fresh-input { width: 100%; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(100, 116, 139, 0.2); border-radius: 8px; color: #e2e8f0; font-size: 0.9rem; transition: all 0.2s ease; } .start-fresh-input:focus { outline: none; border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } .start-fresh-input::placeholder { color: #475569; } /* Suggestions */ .start-fresh-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .start-fresh-suggestion { padding: 0.4rem 0.75rem; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 6px; color: #10b981; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; } .start-fresh-suggestion:hover { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); } /* Footer / Actions */ .start-fresh-footer { padding: 1rem 2rem 2rem; display: flex; gap: 0.75rem; } .start-fresh-btn { flex: 1; padding: 0.875rem 1.5rem; border-radius: 10px; font-family: 'Exo 2', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; } .start-fresh-btn.btn-secondary { background: rgba(100, 116, 139, 0.1); border: 1px solid rgba(100, 116, 139, 0.2); color: #94a3b8; } .start-fresh-btn.btn-secondary:hover { background: rgba(100, 116, 139, 0.15); } .start-fresh-btn.btn-primary { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } .start-fresh-btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); } .start-fresh-btn svg { width: 18px; height: 18px; } /* Progress indicator */ .start-fresh-progress { display: flex; justify-content: center; gap: 0.5rem; padding: 0 2rem 1rem; } .start-fresh-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(100, 116, 139, 0.3); transition: all 0.2s ease; } .start-fresh-progress-dot.active { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); } .start-fresh-progress-dot.completed { background: rgba(16, 185, 129, 0.5); } /* ============================================================================= RESPONSIVE ============================================================================= */ @media (max-width: 768px) { .identity-compromised-panel { border-radius: 12px; margin: 1rem 0; } .identity-compromised-content { padding: 1.25rem; } .identity-compromised-header { flex-direction: column; text-align: center; } .identity-burn-icon { margin: 0 auto; } .identity-burn-stats { flex-direction: column; gap: 0.5rem; } .identity-burn-stat { flex: none; } .identity-option { flex-wrap: wrap; } .identity-option-badge { order: -1; margin-bottom: 0.5rem; } .start-fresh-container { border-radius: 16px; max-height: 85vh; } .start-fresh-header, .start-fresh-steps, .start-fresh-footer { padding-left: 1.25rem; padding-right: 1.25rem; } .start-fresh-footer { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════════════════════════ IDENTITY BURN LEVEL - COMPROMISED BEYOND REPAIR WARNING Guides users to either fresh start or remediation ═══════════════════════════════════════════════════════════════════════════════ */ /* ============================================================================= BURN LEVEL INDICATOR ============================================================================= */ .burn-level-indicator { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .burn-level-indicator.burn-safe { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .burn-level-indicator.burn-exposed { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .burn-level-indicator.burn-compromised { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } .burn-level-indicator.burn-critical { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.25)); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.5); animation: burnPulse 2s ease-in-out infinite; } @keyframes burnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); } } /* ============================================================================= IDENTITY BURNED CARD - FULL WARNING ============================================================================= */ .identity-burned-card { position: relative; background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.05), rgba(15, 23, 42, 0.95)); border-radius: 16px; padding: 1.5rem; margin: 1.5rem 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25), 0 8px 32px rgba(0, 0, 0, 0.4); } /* Animated warning stripe at top */ .identity-burned-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, #ef4444 20%, #f97316 40%, #ef4444 60%, #dc2626 80%, transparent 100% ); background-size: 200% 100%; animation: burnStripe 3s linear infinite; } @keyframes burnStripe { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Subtle fire particle effect */ .identity-burned-card::after { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: radial-gradient(circle at center, rgba(239, 68, 68, 0.15) 0%, transparent 70%); pointer-events: none; } .burn-card-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .burn-card-icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15)); border-radius: 12px; position: relative; } .burn-card-icon::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(249, 115, 22, 0.3)); z-index: -1; animation: iconGlow 2s ease-in-out infinite; } @keyframes iconGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .burn-card-icon svg { width: 28px; height: 28px; color: #ef4444; } .burn-card-title { font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 700; color: #fca5a5; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; } .burn-card-title .burn-badge { font-size: 0.65rem; padding: 0.2rem 0.5rem; background: linear-gradient(135deg, #ef4444, #dc2626); color: white; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .burn-card-subtitle { font-size: 0.9rem; color: #94a3b8; line-height: 1.5; } .burn-card-subtitle strong { color: #fca5a5; } /* Stats showing why it's burned */ .burn-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; padding: 1rem; background: rgba(0, 0, 0, 0.25); border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.15); } .burn-stat { flex: 1; min-width: 100px; text-align: center; } .burn-stat-value { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; color: #ef4444; line-height: 1; } .burn-stat-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.25rem; } /* Explanation section */ .burn-explanation { background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 1rem; margin: 1rem 0; border-left: 3px solid rgba(239, 68, 68, 0.5); } .burn-explanation-title { font-size: 0.8rem; font-weight: 600; color: #f87171; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; } .burn-explanation-text { font-size: 0.85rem; color: #94a3b8; line-height: 1.6; } /* ============================================================================= TWO-PATH DECISION BUTTONS ============================================================================= */ .burn-decision { margin-top: 1.25rem; } .burn-decision-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; } .burn-paths { display: flex; flex-direction: column; gap: 0.75rem; } /* Primary path: Fresh Start */ .burn-path { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; } .burn-path-primary { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.1)); border: 1px solid rgba(16, 185, 129, 0.3); } .burn-path-primary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #10b981, #22c55e, #10b981); } .burn-path-primary:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(34, 197, 94, 0.15)); border-color: rgba(16, 185, 129, 0.5); transform: translateX(4px); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2); } /* Secondary path: Salvage */ .burn-path-secondary { background: rgba(100, 116, 139, 0.08); border: 1px solid rgba(100, 116, 139, 0.2); } .burn-path-secondary:hover { background: rgba(100, 116, 139, 0.12); border-color: rgba(100, 116, 139, 0.35); transform: translateX(4px); } .burn-path-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .burn-path-primary .burn-path-icon { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(34, 197, 94, 0.15)); } .burn-path-primary .burn-path-icon svg { width: 22px; height: 22px; color: #10b981; } .burn-path-secondary .burn-path-icon { background: rgba(100, 116, 139, 0.15); } .burn-path-secondary .burn-path-icon svg { width: 22px; height: 22px; color: #64748b; } .burn-path-content { flex: 1; } .burn-path-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; } .burn-path-primary .burn-path-title { color: #10b981; } .burn-path-secondary .burn-path-title { color: #94a3b8; } .burn-path-desc { font-size: 0.8rem; color: #64748b; } .burn-path-arrow { color: #64748b; transition: transform 0.2s ease; } .burn-path:hover .burn-path-arrow { transform: translateX(4px); } .burn-path-arrow svg { width: 20px; height: 20px; } /* Recommended badge */ .burn-path-badge { position: absolute; top: -1px; right: 1rem; padding: 0.2rem 0.6rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 0 0 6px 6px; } .burn-path-primary .burn-path-badge { background: linear-gradient(135deg, #10b981, #059669); color: white; } /* ============================================================================= MINI BURN WARNING (for cards/badges) ============================================================================= */ .burn-mini-warning { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08)); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 8px; font-size: 0.75rem; color: #fca5a5; margin-top: 0.5rem; } .burn-mini-warning svg { width: 14px; height: 14px; flex-shrink: 0; color: #ef4444; } .burn-mini-warning a { color: #f87171; font-weight: 600; text-decoration: none; margin-left: auto; } .burn-mini-warning a:hover { text-decoration: underline; } /* ============================================================================= RESPONSIVE ============================================================================= */ @media (max-width: 768px) { .identity-burned-card { padding: 1.25rem; border-radius: 12px; } .burn-card-header { flex-direction: column; align-items: center; text-align: center; } .burn-card-icon { width: 48px; height: 48px; } .burn-card-title { font-size: 1.1rem; flex-direction: column; gap: 0.35rem; } .burn-stats { flex-direction: column; gap: 0.75rem; } .burn-stat { min-width: auto; display: flex; justify-content: space-between; align-items: center; text-align: left; } .burn-stat-value { font-size: 1.25rem; } .burn-path { padding: 0.875rem 1rem; } .burn-path-icon { width: 40px; height: 40px; } } /* ═══════════════════════════════════════════════════════════════════════════════ SECURITY JOURNEY WIDGET Tracks user progress: DoxxScan → Asset Shield → Missions ═══════════════════════════════════════════════════════════════════════════════ */ .security-journey-widget { background: linear-gradient(160deg, rgba(12, 18, 28, 0.95), rgba(8, 12, 20, 0.98)); border-radius: 16px; padding: 1.25rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.15), 0 8px 32px rgba(0, 0, 0, 0.3); clip-path: polygon( 0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px) ); } .security-journey-widget::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #a78bfa, #8b5cf6, #22d3ee, #10b981); } /* Header */ .journey-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .journey-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Exo 2', sans-serif; font-size: 0.95rem; font-weight: 600; color: #e2e8f0; } .journey-icon { font-size: 1.1rem; } .journey-progress { flex: 1; height: 6px; background: rgba(100, 116, 139, 0.2); border-radius: 3px; overflow: hidden; } .journey-progress-bar { height: 100%; background: linear-gradient(90deg, #a78bfa, #8b5cf6); border-radius: 3px; transition: width 0.5s ease; } .journey-percent { font-size: 0.75rem; font-weight: 600; color: #a78bfa; min-width: 35px; text-align: right; } /* Steps */ .journey-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: 1.25rem 0; padding: 0 1rem; } .journey-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .journey-step-circle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.1rem; transition: all 0.3s ease; } .journey-step.pending .journey-step-circle { background: rgba(100, 116, 139, 0.15); border: 2px solid rgba(100, 116, 139, 0.3); color: #64748b; } .journey-step.current .journey-step-circle { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1)); border: 2px solid rgba(139, 92, 246, 0.5); color: #a78bfa; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); animation: currentPulse 2s ease-in-out infinite; } @keyframes currentPulse { 0%, 100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); } 50% { box-shadow: 0 0 25px rgba(139, 92, 246, 0.5); } } .journey-step.done .journey-step-circle { background: linear-gradient(135deg, #10b981, #059669); border: 2px solid rgba(16, 185, 129, 0.5); color: white; } .journey-step-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .journey-step.pending .journey-step-label { color: #64748b; } .journey-step.current .journey-step-label { color: #a78bfa; } .journey-step.done .journey-step-label { color: #10b981; } /* Connector lines */ .journey-line { width: 50px; height: 2px; background: rgba(100, 116, 139, 0.2); margin: 0 0.25rem; margin-bottom: 1.5rem; /* Align with circles */ transition: background 0.3s ease; } .journey-line.done { background: linear-gradient(90deg, #10b981, rgba(16, 185, 129, 0.5)); } /* Burn warning */ .journey-burn-warning { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08)); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 8px; font-size: 0.75rem; color: #fca5a5; margin-bottom: 1rem; } /* Next action */ .journey-next-action { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--action-bg, rgba(139, 92, 246, 0.1)); border: 1px solid var(--action-border, rgba(139, 92, 246, 0.25)); border-radius: 12px; clip-path: polygon( 0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px) ); } .journey-action-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--action-bg, rgba(139, 92, 246, 0.15)); border-radius: 10px; font-size: 1.3rem; flex-shrink: 0; } .journey-action-content { flex: 1; min-width: 0; } .journey-action-title { font-family: 'Exo 2', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--action-color, #a78bfa); margin-bottom: 0.2rem; } .journey-action-desc { font-size: 0.8rem; color: #94a3b8; line-height: 1.4; } .journey-action-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: var(--action-color, #a78bfa); color: white; border-radius: 8px; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all 0.2s ease; clip-path: polygon( 0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px) ); } .journey-action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); } /* Responsive */ @media (max-width: 640px) { .security-journey-widget { padding: 1rem; } .journey-steps { padding: 0; } .journey-step-circle { width: 36px; height: 36px; font-size: 1rem; } .journey-line { width: 30px; } .journey-next-action { flex-direction: column; text-align: center; gap: 0.75rem; } .journey-action-btn { width: 100%; justify-content: center; } } /* ============================================================ ADDITIONAL MOBILE OPTIMIZATIONS Added: January 30, 2026 ============================================================ */ @media (max-width: 768px) { /* Global touch target improvements */ button, a.btn, .btn, [role="button"] { min-height: 44px; touch-action: manipulation; } /* Prevent double-tap zoom */ * { touch-action: manipulation; } /* Improved focus states for accessibility */ :focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } /* Card improvements */ .dashboard-card, .cosmic-card, .feature-card { padding: 1rem; } /* Modal improvements */ .modal-content, .dialog-content { max-height: 90vh; overflow-y: auto; margin: 1rem; width: calc(100% - 2rem); } /* Footer improvements */ .footer-content { flex-direction: column; gap: 2rem; text-align: center; } .footer-links { flex-direction: column; gap: 0.5rem; } /* Safe area for notched phones */ .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); } body { padding-bottom: env(safe-area-inset-bottom, 0); } } /* iOS-specific fixes */ @supports (-webkit-touch-callout: none) { /* Prevent rubber-band scrolling issues */ body { overscroll-behavior-y: none; } /* Fix for 100vh on iOS */ .full-height { height: 100vh; height: -webkit-fill-available; } } /* ===== GLOBAL MOBILE SAFETY NET ===== */ /* Catch-all rules to prevent horizontal overflow on any page */ @media (max-width: 768px) { /* Prevent any element from exceeding viewport */ img, video, iframe, embed, object, table, pre, code { max-width: 100% !important; } /* Tables should scroll horizontally if needed */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Pre/code blocks should scroll */ pre { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre-wrap; word-break: break-word; } /* Prevent fixed-width inline styles from breaking layout */ [style*="width:"][style*="px"] { max-width: 100%; box-sizing: border-box; } } @media (max-width: 480px) { /* Tighter padding on very small screens */ .card, .dashboard-card { padding: 1rem !important; } /* Ensure all buttons are tappable */ .btn, button, a.btn, [role="button"] { min-height: 44px; padding-left: 1rem; padding-right: 1rem; } /* Stack flex containers that might overflow */ .stats-row, .quick-stats, .metric-row { flex-wrap: wrap !important; } } /* ===== iOS INPUT ZOOM PREVENTION ===== */ @media screen and (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], select, textarea { font-size: 16px !important; } } /** * GalaxyWarden UI Polish * ====================== * Clean, professional micro-interactions. * Subtle, purposeful, accessible. */ :root { --ui-fast: 150ms; --ui-normal: 250ms; --ui-slow: 400ms; --ui-ease: cubic-bezier(0.4, 0, 0.2, 1); --ui-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================ SKELETON LOADERS ============================================ */ .skeleton { background: rgba(100, 116, 139, 0.1); border-radius: 6px; position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.15), transparent); animation: shimmer 1.5s infinite; transform: translateX(-100%); } @keyframes shimmer { 100% { transform: translateX(100%); } } .skeleton-text { height: 1em; margin-bottom: 0.5em; } .skeleton-title { height: 1.5em; width: 60%; margin-bottom: 1em; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; } .skeleton-card { min-height: 120px; border-radius: 12px; } .skeleton-stat { height: 80px; border-radius: 10px; } .skeleton-btn { height: 44px; width: 120px; border-radius: 8px; } .skeleton-row { height: 56px; border-radius: 8px; margin-bottom: 0.5rem; } /* Page loading overlay */ .page-loading { position: fixed; inset: 0; background: rgba(10, 14, 23, 0.9); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.3s ease; } .page-loading.fade-out { opacity: 0; pointer-events: none; } .page-loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(168, 213, 229, 0.2); border-top-color: var(--accent-cyan, #A8D5E5); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ============================================ BUTTON STATES ============================================ */ .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Subtle ripple */ .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transform: scale(0); animation: ripple 0.5s ease-out; pointer-events: none; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } /* ============================================ FORM VALIDATION ============================================ */ .form-group { position: relative; } .form-input { transition: border-color var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease); } .form-input:focus { border-color: var(--accent-cyan, #A8D5E5); box-shadow: 0 0 0 3px rgba(168, 213, 229, 0.15); } .form-input.is-valid { border-color: #10b981; } .form-input.is-invalid { border-color: #ef4444; } .validation-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0; transition: opacity var(--ui-fast) var(--ui-ease); } .form-input.is-valid ~ .validation-icon.valid, .form-input.is-invalid ~ .validation-icon.invalid { opacity: 1; } .validation-icon.valid { color: #10b981; } .validation-icon.invalid { color: #ef4444; } .form-feedback { font-size: 0.8rem; margin-top: 4px; opacity: 0; transform: translateY(-4px); transition: opacity var(--ui-fast), transform var(--ui-fast); } .form-feedback.show { opacity: 1; transform: translateY(0); } .form-feedback.error { color: #ef4444; } .form-feedback.success { color: #10b981; } /* ============================================ SCROLL REVEAL ============================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--ui-slow) var(--ui-ease), transform var(--ui-slow) var(--ui-ease); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered children */ .stagger-reveal > * { opacity: 0; transform: translateY(12px); transition: opacity var(--ui-normal) var(--ui-ease), transform var(--ui-normal) var(--ui-ease); } .stagger-reveal.visible > *:nth-child(1) { transition-delay: 0ms; } .stagger-reveal.visible > *:nth-child(2) { transition-delay: 40ms; } .stagger-reveal.visible > *:nth-child(3) { transition-delay: 80ms; } .stagger-reveal.visible > *:nth-child(4) { transition-delay: 120ms; } .stagger-reveal.visible > *:nth-child(5) { transition-delay: 160ms; } .stagger-reveal.visible > *:nth-child(6) { transition-delay: 200ms; } .stagger-reveal.visible > * { opacity: 1; transform: translateY(0); } /* ============================================ COUNTER ANIMATION ============================================ */ .counter { font-variant-numeric: tabular-nums; } /* ============================================ MODAL POLISH ============================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--ui-normal) var(--ui-ease); z-index: 9998; } .modal-overlay.active { opacity: 1; } .modal-panel { opacity: 0; transform: scale(0.96) translateY(8px); transition: opacity var(--ui-normal) var(--ui-ease), transform var(--ui-normal) var(--ui-bounce); } .modal-overlay.active .modal-panel { opacity: 1; transform: scale(1) translateY(0); } /* ============================================ TOAST PROGRESS ============================================ */ .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--accent-cyan, #A8D5E5); border-radius: 0 0 0 8px; animation: countdown linear forwards; } @keyframes countdown { from { width: 100%; } to { width: 0%; } } /* ============================================ CARD HOVER ============================================ */ .card-lift { transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease); } .card-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* ============================================ TOOLTIPS ============================================ */ [data-tip] { position: relative; } [data-tip]::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 10px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 6px; font-size: 0.75rem; color: #e2e8f0; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--ui-fast), transform var(--ui-fast); z-index: 100; } [data-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ STATUS DOTS ============================================ */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .status-dot.active { background: #10b981; } .status-dot.warning { background: #f59e0b; } .status-dot.danger { background: #ef4444; animation: pulse 1.5s infinite; } .status-dot.muted { background: #64748b; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ============================================ FOCUS STATES ============================================ */ :focus-visible { outline: 2px solid var(--accent-cyan, #A8D5E5); outline-offset: 2px; } /* ============================================ PAGE FADE IN ============================================ */ .main-content { animation: fadeIn var(--ui-normal) var(--ui-ease); } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ UTILITIES ============================================ */ .fade-in { animation: fadeIn var(--ui-normal) var(--ui-ease); } .shake { animation: shake 0.4s var(--ui-ease); } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ============================================ ENHANCED EMPTY STATES - Terminal Style ============================================ */ .empty-state-enhanced { position: relative; background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98)); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 16px; padding: 3rem 2rem; text-align: center; overflow: hidden; } /* Terminal header */ .empty-state-enhanced::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: linear-gradient(135deg, rgba(100,116,139,0.2), rgba(100,116,139,0.1)); border-bottom: 1px solid rgba(100, 116, 139, 0.3); } .empty-state-enhanced .terminal-dots { position: absolute; top: 12px; left: 16px; display: flex; gap: 6px; } .empty-state-enhanced .terminal-dots span { width: 10px; height: 10px; border-radius: 50%; } .empty-state-enhanced .terminal-dots span:nth-child(1) { background: #ef4444; } .empty-state-enhanced .terminal-dots span:nth-child(2) { background: #fbbf24; } .empty-state-enhanced .terminal-dots span:nth-child(3) { background: #10b981; } .empty-state-enhanced .terminal-title { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: #64748b; font-family: 'Exo 2', monospace; letter-spacing: 0.05em; } /* Corner brackets like error pages */ .empty-state-enhanced .corner-bracket { position: absolute; width: 20px; height: 20px; border: 2px solid #A8D5E5; opacity: 0.5; } .empty-state-enhanced .corner-bracket.tl { top: 50px; left: 10px; border-right: none; border-bottom: none; } .empty-state-enhanced .corner-bracket.tr { top: 50px; right: 10px; border-left: none; border-bottom: none; } .empty-state-enhanced .corner-bracket.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; } .empty-state-enhanced .corner-bracket.br { bottom: 10px; right: 10px; border-left: none; border-top: none; } /* Content */ .empty-state-enhanced .empty-content { margin-top: 20px; position: relative; z-index: 1; } .empty-state-enhanced .empty-icon { font-size: 4rem; margin-bottom: 1rem; animation: floatIcon 3s ease-in-out infinite; } @keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .empty-state-enhanced .empty-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin-bottom: 0.75rem; } .empty-state-enhanced .empty-text { color: #94a3b8; font-size: 0.95rem; max-width: 400px; margin: 0 auto 1.5rem; line-height: 1.6; } /* Diagnostic readout */ .empty-state-enhanced .diagnostic-panel { display: inline-flex; gap: 2rem; background: rgba(0, 0, 0, 0.3); padding: 1rem 2rem; border-radius: 8px; border: 1px solid rgba(100, 116, 139, 0.2); margin-bottom: 1.5rem; } .empty-state-enhanced .diagnostic-item { text-align: center; } .empty-state-enhanced .diagnostic-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; } .empty-state-enhanced .diagnostic-value { font-family: 'Exo 2', monospace; font-size: 0.85rem; font-weight: 600; } .empty-state-enhanced .diagnostic-value.ok { color: #10b981; } .empty-state-enhanced .diagnostic-value.warning { color: #f59e0b; } .empty-state-enhanced .diagnostic-value.error { color: #ef4444; } .empty-state-enhanced .diagnostic-value.info { color: #A8D5E5; } /* Warp drive loading */ .loading-warp { position: relative; width: 80px; height: 80px; margin: 2rem auto; } .loading-warp .warp-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; border-top-color: #A8D5E5; animation: warpSpin 1s linear infinite; } .loading-warp .warp-ring:nth-child(2) { width: 70%; height: 70%; top: 15%; left: 15%; border-top-color: #a78bfa; animation-duration: 0.8s; animation-direction: reverse; } .loading-warp .warp-ring:nth-child(3) { width: 40%; height: 40%; top: 30%; left: 30%; border-top-color: #fbbf24; animation-duration: 0.6s; } .loading-warp .warp-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #A8D5E5; border-radius: 50%; box-shadow: 0 0 20px #A8D5E5; animation: warpPulse 1s ease-in-out infinite; } @keyframes warpSpin { to { transform: rotate(360deg); } } @keyframes warpPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.6; } } /* Success celebration particles */ .success-celebration { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10000; overflow: hidden; } .success-celebration .particle { position: absolute; width: 10px; height: 10px; border-radius: 50%; animation: celebrateParticle 1.5s ease-out forwards; } @keyframes celebrateParticle { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-100vh) scale(0); opacity: 0; } } /* Enhanced progress bars */ .progress-cosmic { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 8px; height: 12px; overflow: hidden; position: relative; } .progress-cosmic .progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #A8D5E5, #a78bfa); position: relative; transition: width 0.5s ease; } .progress-cosmic .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: progressShine 2s ease-in-out infinite; } @keyframes progressShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Enhanced status badges */ .badge-cosmic { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } .badge-cosmic.stellar { background: rgba(168, 213, 229, 0.15); border: 1px solid rgba(168, 213, 229, 0.3); color: #A8D5E5; } .badge-cosmic.purple { background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.3); color: #a78bfa; } .badge-cosmic.gold { background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.3); color: #fbbf24; } .badge-cosmic.success { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; } .badge-cosmic.danger { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; } /* Card hover effects */ .card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 213, 229, 0.1); } .hover-glow:hover { box-shadow: 0 0 30px rgba(168, 213, 229, 0.2); } .hover-glow-purple:hover { box-shadow: 0 0 30px rgba(167, 139, 250, 0.2); } .hover-glow-gold:hover { box-shadow: 0 0 30px rgba(251, 191, 36, 0.2); } .hover-glow-success:hover { box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); } /* Status indicators with pulse */ .status-indicator { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .status-indicator .dot { width: 8px; height: 8px; border-radius: 50%; animation: statusPulse 2s ease-in-out infinite; } .status-indicator.online { background: rgba(16, 185, 129, 0.15); color: #10b981; } .status-indicator.online .dot { background: #10b981; box-shadow: 0 0 8px #10b981; } .status-indicator.danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .status-indicator.danger .dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: statusPulseFast 1s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.9); } } @keyframes statusPulseFast { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } /* Responsive */ @media (max-width: 768px) { .empty-state-enhanced { padding: 2rem 1rem; } .empty-state-enhanced .diagnostic-panel { flex-direction: column; gap: 1rem; padding: 1rem; } } /** * GalaxyWarden Empty States * ========================= * Helpful states when content is missing */ /* Full empty state block */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; min-height: 280px; } .empty-state-icon { width: 72px; height: 72px; margin-bottom: 1.25rem; color: var(--accent-cyan, #A8D5E5); opacity: 0.5; } .empty-state-icon svg { width: 100%; height: 100%; } .empty-state-title { font-family: 'Exo 2', sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--text-primary, #e0e7ff); margin: 0 0 0.5rem 0; } .empty-state-text { font-size: 0.9rem; color: var(--text-secondary, #94a3b8); max-width: 340px; margin: 0 0 1.5rem 0; line-height: 1.5; } .empty-state-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.2rem; background: linear-gradient(135deg, var(--accent-cyan, #A8D5E5), #0891b2); color: #0a0e17; font-weight: 600; font-size: 0.875rem; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .empty-state-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(168, 213, 229, 0.3); } .empty-state-btn svg { width: 16px; height: 16px; } .empty-state-link { margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted, #64748b); } .empty-state-link a { color: var(--accent-cyan, #A8D5E5); text-decoration: none; } .empty-state-link a:hover { text-decoration: underline; } /* Compact variant */ .empty-state.compact { padding: 2rem 1rem; min-height: 160px; } .empty-state.compact .empty-state-icon { width: 48px; height: 48px; margin-bottom: 1rem; } .empty-state.compact .empty-state-title { font-size: 1rem; } .empty-state.compact .empty-state-text { font-size: 0.85rem; margin-bottom: 1rem; } /* Success variant (all clear) */ .empty-state.success .empty-state-icon { color: #10b981; opacity: 0.7; } /* Warning variant */ .empty-state.warning .empty-state-icon { color: #f59e0b; opacity: 0.7; } /* Inline empty (for cards/lists) */ .empty-inline { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: rgba(100, 116, 139, 0.06); border: 1px dashed rgba(100, 116, 139, 0.2); border-radius: 10px; } .empty-inline-icon { width: 36px; height: 36px; color: var(--accent-cyan, #A8D5E5); opacity: 0.4; flex-shrink: 0; } .empty-inline-icon svg { width: 100%; height: 100%; } .empty-inline-content { flex: 1; } .empty-inline-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary, #e0e7ff); margin-bottom: 0.25rem; } .empty-inline-text { font-size: 0.825rem; color: var(--text-secondary, #94a3b8); } .empty-inline-btn { padding: 0.5rem 0.875rem; background: rgba(168, 213, 229, 0.1); border: 1px solid rgba(168, 213, 229, 0.25); border-radius: 6px; color: var(--accent-cyan, #A8D5E5); font-size: 0.8rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.15s; } .empty-inline-btn:hover { background: rgba(168, 213, 229, 0.2); } /* ============================================================================ GALAXYWARDEN LOGO - BREATHING COLOR EFFECT Logo pulses between muted and fully saturated/bright like breathing Stays bright on hover ============================================================================ */ /* === KEYFRAMES === */ /* Logo breathes: muted -> bright -> muted */ @keyframes logoBreathColor { 0%, 100% { filter: saturate(0.4) brightness(0.8); } 50% { filter: saturate(1.3) brightness(1.1); } } /* Glow breathes behind the logo */ @keyframes glowBreathe { 0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); } } /* Hover state - fast bright pulse */ @keyframes logoBreathColorHover { 0%, 100% { filter: saturate(1.4) brightness(1.15); } 50% { filter: saturate(1.6) brightness(1.25); } } @keyframes glowBreatheHover { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.05); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); } } /* === NAV BAR LOGO (88px) === */ .gw-nav-logo { position: relative; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; } /* Glow layer — subtle ambient light behind logo */ .gw-nav-logo::before { content: ''; position: absolute; width: 60px; height: 60px; left: 17px; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(168, 213, 229, 0.35) 0%, rgba(139, 92, 246, 0.12) 50%, transparent 75%); border-radius: 50%; z-index: 0; filter: blur(12px); animation: glowBreathe 5s ease-in-out infinite; pointer-events: none; } .gw-nav-logo img { width: 88px; height: 88px; position: relative; z-index: 1; animation: logoBreathColor 4s ease-in-out infinite; } /* Hover - stay bright */ .gw-nav-logo:hover::before { animation: glowBreatheHover 2s ease-in-out infinite; } .gw-nav-logo:hover img { animation: logoBreathColorHover 2s ease-in-out infinite; } /* === MOBILE LOGO (Large - 250px) === */ .mobile-logo-btn { position: relative; } .mobile-logo-btn::before { content: ''; position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(34, 211, 238, 0.8) 0%, rgba(168, 213, 229, 0.5) 35%, rgba(139, 92, 246, 0.3) 55%, transparent 75%); border-radius: 50%; z-index: 0; filter: blur(25px); animation: glowBreathe 4s ease-in-out infinite; pointer-events: none; } .mobile-logo-img { height: 250px; width: auto; position: relative; z-index: 1; animation: logoBreathColor 4s ease-in-out infinite; } .mobile-logo-btn:hover::before, .mobile-logo-btn:focus::before { animation: glowBreatheHover 2s ease-in-out infinite; } .mobile-logo-btn:hover .mobile-logo-img, .mobile-logo-btn:focus .mobile-logo-img { animation: logoBreathColorHover 2s ease-in-out infinite; } /* === DESKTOP LOGO (Large - 225px) === */ .desktop-logo-btn { position: relative; } .desktop-logo-btn::before { content: ''; position: absolute; width: 280px; height: 280px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(34, 211, 238, 0.8) 0%, rgba(168, 213, 229, 0.5) 35%, rgba(139, 92, 246, 0.3) 55%, transparent 75%); border-radius: 50%; z-index: 0; filter: blur(25px); animation: glowBreathe 4s ease-in-out infinite; pointer-events: none; } .desktop-logo-img { height: 225px; width: auto; position: relative; z-index: 1; animation: logoBreathColor 4s ease-in-out infinite; } .desktop-logo-btn:hover::before { animation: glowBreatheHover 2s ease-in-out infinite; } .desktop-logo-btn:hover .desktop-logo-img { animation: logoBreathColorHover 2s ease-in-out infinite; } /* === SIDEBAR LOGO === */ .sidebar-logo { position: relative; } .sidebar-logo::before { content: ''; position: absolute; width: 130px; height: 130px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(34, 211, 238, 0.6) 0%, rgba(168, 213, 229, 0.4) 40%, transparent 70%); border-radius: 50%; z-index: 0; filter: blur(15px); animation: glowBreathe 4s ease-in-out infinite; pointer-events: none; } .sidebar-logo-icon { position: relative; z-index: 1; animation: logoBreathColor 4s ease-in-out infinite; } .sidebar-logo:hover::before { animation: glowBreatheHover 2s ease-in-out infinite; } .sidebar-logo:hover .sidebar-logo-icon { animation: logoBreathColorHover 2s ease-in-out infinite; } /* === FOOTER LOGO === */ footer img[alt=""] { animation: logoBreathColor 4s ease-in-out infinite; } footer img[alt=""]:hover { animation: logoBreathColorHover 2s ease-in-out infinite; } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { .gw-nav-logo img, .mobile-logo-img, .desktop-logo-img, .sidebar-logo-icon, footer img[alt=""] { animation: none !important; filter: saturate(1) brightness(1) !important; } .gw-nav-logo::before, .mobile-logo-btn::before, .desktop-logo-btn::before, .sidebar-logo::before { animation: none !important; opacity: 0.5; } } /* === MOBILE OPTIMIZATIONS === */ @media (max-width: 768px) { .gw-nav-logo img, .mobile-logo-img, .gw-nav-logo::before, .mobile-logo-btn::before { animation-duration: 5s; } } /* ============================================ GALAXYWARDEN CRYSTAL UI COMPONENT LIBRARY ============================================ Ice crystal aesthetic matching the shield logo - Faceted geometric shapes - Frosted glass effects - Ice blue gradients - Crystalline glow effects ============================================ */ /* ============================================ CSS VARIABLES - CRYSTAL PALETTE ============================================ */ :root { /* Core Crystal Colors */ --crystal-primary: #A8D5E5; --crystal-secondary: #7FC8DC; --crystal-deep: #5BA4B5; --crystal-light: #C5E8F2; --crystal-white: #E8F6FA; /* Glow Effects */ --crystal-glow: rgba(168, 213, 229, 0.5); --crystal-glow-soft: rgba(168, 213, 229, 0.25); --crystal-glow-intense: rgba(168, 213, 229, 0.8); /* Frost/Ice Effects */ --frost-overlay: rgba(200, 230, 245, 0.08); --frost-border: rgba(168, 213, 229, 0.3); --frost-shine: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(168,213,229,0.1) 100%); /* Dark Background (space theme) */ --void-deep: #0a0e17; --void-mid: #0f1729; --void-surface: #1a1f2e; /* Crystal Gradients */ --crystal-gradient: linear-gradient(135deg, #A8D5E5 0%, #7FC8DC 50%, #5BA4B5 100%); --crystal-gradient-soft: linear-gradient(135deg, rgba(168,213,229,0.2) 0%, rgba(127,200,220,0.1) 100%); --crystal-gradient-shine: linear-gradient(135deg, #C5E8F2 0%, #A8D5E5 30%, #7FC8DC 70%, #5BA4B5 100%); /* Facet Effect (simulates crystal cuts) */ --facet-highlight: rgba(255, 255, 255, 0.12); --facet-shadow: rgba(0, 0, 0, 0.15); } /* ============================================ CRYSTAL BUTTONS ============================================ */ /* Primary Crystal Button */ .crystal-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 0.95rem; color: #0a0e17; background: var(--crystal-gradient); border: none; border-radius: 8px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; text-decoration: none; /* Crystalline cut effect */ clip-path: polygon( 0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px) ); } .crystal-btn::before { content: ''; position: absolute; inset: 0; background: var(--frost-shine); opacity: 0.8; transition: opacity 0.3s; } .crystal-btn::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70% ); transform: translateX(-100%) rotate(45deg); transition: transform 0.6s; } .crystal-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px var(--crystal-glow), 0 0 40px var(--crystal-glow-soft); } .crystal-btn:hover::after { transform: translateX(100%) rotate(45deg); } .crystal-btn:active { transform: translateY(0); } /* Secondary (Outline) Crystal Button */ .crystal-btn-outline { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 23px; font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--crystal-primary); background: transparent; border: 2px solid var(--crystal-primary); border-radius: 8px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; text-decoration: none; clip-path: polygon( 0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px) ); } .crystal-btn-outline::before { content: ''; position: absolute; inset: 0; background: var(--crystal-gradient); opacity: 0; transition: opacity 0.3s; z-index: -1; } .crystal-btn-outline:hover { color: #0a0e17; border-color: transparent; box-shadow: 0 0 30px var(--crystal-glow-soft); } .crystal-btn-outline:hover::before { opacity: 1; } /* Ghost Crystal Button */ .crystal-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: 'Exo 2', sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--crystal-primary); background: rgba(168, 213, 229, 0.08); border: 1px solid rgba(168, 213, 229, 0.2); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .crystal-btn-ghost:hover { background: rgba(168, 213, 229, 0.15); border-color: rgba(168, 213, 229, 0.4); box-shadow: 0 0 20px var(--crystal-glow-soft); } /* ============================================ CRYSTAL CARDS ============================================ */ /* Standard Crystal Card */ .crystal-card { position: relative; background: linear-gradient(135deg, rgba(26, 31, 46, 0.95), rgba(15, 23, 41, 0.95)); border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; overflow: hidden; /* Frosted glass effect */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .crystal-card::before { content: ''; position: absolute; inset: 0; background: var(--frost-shine); pointer-events: none; } /* Crystal edge highlight */ .crystal-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--crystal-primary) 20%, var(--crystal-light) 50%, var(--crystal-primary) 80%, transparent 100% ); opacity: 0.5; } .crystal-card:hover { border-color: rgba(168, 213, 229, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 60px var(--crystal-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Faceted Crystal Card (hexagonal feel) */ .crystal-card-faceted { position: relative; background: linear-gradient(135deg, rgba(26, 31, 46, 0.95), rgba(15, 23, 41, 0.95)); border: 1px solid var(--frost-border); padding: 24px; overflow: hidden; /* Faceted corners */ clip-path: polygon( 0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px) ); } .crystal-card-faceted::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, var(--crystal-primary), var(--crystal-light), var(--crystal-primary)); opacity: 0.6; } /* Glowing Crystal Card */ .crystal-card-glow { position: relative; background: linear-gradient(135deg, rgba(26, 31, 46, 0.95), rgba(15, 23, 41, 0.95)); border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; overflow: hidden; animation: crystal-pulse 4s ease-in-out infinite; } @keyframes crystal-pulse { 0%, 100% { box-shadow: 0 0 20px var(--crystal-glow-soft), inset 0 0 30px rgba(168, 213, 229, 0.03); } 50% { box-shadow: 0 0 40px var(--crystal-glow), inset 0 0 50px rgba(168, 213, 229, 0.06); } } /* ============================================ CRYSTAL BADGES & CHIPS ============================================ */ .crystal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-family: 'Exo 2', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--crystal-primary); background: linear-gradient(135deg, rgba(168, 213, 229, 0.15), rgba(168, 213, 229, 0.05)); border: 1px solid rgba(168, 213, 229, 0.3); border-radius: 20px; } .crystal-badge-solid { color: #0a0e17; background: var(--crystal-gradient); border: none; } /* Status badges with crystal effect */ .crystal-badge-success { color: #10b981; background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); border-color: rgba(16, 185, 129, 0.3); } .crystal-badge-warning { color: #f59e0b; background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)); border-color: rgba(245, 158, 11, 0.3); } .crystal-badge-danger { color: #ef4444; background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)); border-color: rgba(239, 68, 68, 0.3); } /* ============================================ CRYSTAL INPUTS ============================================ */ .crystal-input { width: 100%; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #e2e8f0; background: rgba(15, 23, 41, 0.8); border: 1px solid var(--frost-border); border-radius: 8px; outline: none; transition: all 0.3s ease; } .crystal-input::placeholder { color: #64748b; } .crystal-input:focus { border-color: var(--crystal-primary); box-shadow: 0 0 0 3px rgba(168, 213, 229, 0.15), 0 0 20px var(--crystal-glow-soft); } /* Input with crystal icon */ .crystal-input-group { position: relative; } .crystal-input-group .crystal-input { padding-left: 44px; } .crystal-input-group .crystal-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--crystal-primary); opacity: 0.7; } .crystal-input-group:focus-within .crystal-input-icon { opacity: 1; } /* ============================================ CRYSTAL TOGGLES ============================================ */ .crystal-toggle { position: relative; width: 52px; height: 28px; cursor: pointer; } .crystal-toggle input { opacity: 0; width: 0; height: 0; } .crystal-toggle-track { position: absolute; inset: 0; background: rgba(100, 116, 139, 0.3); border: 1px solid rgba(100, 116, 139, 0.4); border-radius: 14px; transition: all 0.3s ease; } .crystal-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #64748b; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .crystal-toggle input:checked ~ .crystal-toggle-track { background: linear-gradient(135deg, rgba(168, 213, 229, 0.3), rgba(127, 200, 220, 0.2)); border-color: var(--crystal-primary); box-shadow: 0 0 20px var(--crystal-glow-soft); } .crystal-toggle input:checked ~ .crystal-toggle-thumb { left: 27px; background: var(--crystal-gradient); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 10px var(--crystal-glow); } /* ============================================ CRYSTAL PROGRESS BARS ============================================ */ .crystal-progress { position: relative; width: 100%; height: 8px; background: rgba(100, 116, 139, 0.2); border-radius: 4px; overflow: hidden; } .crystal-progress-bar { height: 100%; background: var(--crystal-gradient); border-radius: 4px; transition: width 0.5s ease; position: relative; } .crystal-progress-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100% ); animation: crystal-shimmer 2s infinite; } @keyframes crystal-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Segmented crystal progress */ .crystal-progress-segmented { display: flex; gap: 4px; width: 100%; } .crystal-progress-segment { flex: 1; height: 8px; background: rgba(100, 116, 139, 0.2); border-radius: 2px; transition: all 0.3s ease; } .crystal-progress-segment.active { background: var(--crystal-gradient); box-shadow: 0 0 10px var(--crystal-glow-soft); } /* ============================================ CRYSTAL DIVIDERS ============================================ */ .crystal-divider { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--frost-border) 20%, var(--crystal-primary) 50%, var(--frost-border) 80%, transparent 100% ); margin: 24px 0; } .crystal-divider::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--crystal-primary); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); box-shadow: 0 0 10px var(--crystal-glow); } /* Divider with text */ .crystal-divider-text { display: flex; align-items: center; gap: 16px; margin: 24px 0; } .crystal-divider-text::before, .crystal-divider-text::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--frost-border)); } .crystal-divider-text::after { background: linear-gradient(90deg, var(--frost-border), transparent); } .crystal-divider-text span { color: var(--crystal-primary); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } /* ============================================ CRYSTAL ALERTS ============================================ */ .crystal-alert { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--frost-border); background: linear-gradient(135deg, rgba(168, 213, 229, 0.08), rgba(168, 213, 229, 0.02)); overflow: hidden; } .crystal-alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--crystal-gradient); } .crystal-alert-icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--crystal-primary); } .crystal-alert-content { flex: 1; } .crystal-alert-title { font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } .crystal-alert-text { color: #94a3b8; font-size: 0.9rem; } /* Alert variants */ .crystal-alert-success::before { background: linear-gradient(135deg, #10b981, #059669); } .crystal-alert-success { border-color: rgba(16, 185, 129, 0.3); background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02)); } .crystal-alert-success .crystal-alert-icon { color: #10b981; } .crystal-alert-warning::before { background: linear-gradient(135deg, #f59e0b, #d97706); } .crystal-alert-warning { border-color: rgba(245, 158, 11, 0.3); background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02)); } .crystal-alert-warning .crystal-alert-icon { color: #f59e0b; } .crystal-alert-danger::before { background: linear-gradient(135deg, #ef4444, #dc2626); } .crystal-alert-danger { border-color: rgba(239, 68, 68, 0.3); background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02)); } .crystal-alert-danger .crystal-alert-icon { color: #ef4444; } /* ============================================ CRYSTAL LOADING SPINNER ============================================ */ .crystal-spinner { position: relative; width: 48px; height: 48px; } .crystal-spinner-ring { position: absolute; inset: 0; border: 3px solid transparent; border-top-color: var(--crystal-primary); border-radius: 50%; animation: crystal-spin 1s linear infinite; } .crystal-spinner-ring:nth-child(2) { inset: 6px; border-top-color: var(--crystal-secondary); animation-duration: 1.5s; animation-direction: reverse; } .crystal-spinner-ring:nth-child(3) { inset: 12px; border-top-color: var(--crystal-deep); animation-duration: 2s; } @keyframes crystal-spin { to { transform: rotate(360deg); } } /* Crystal dot pulse loader */ .crystal-loader-dots { display: flex; gap: 8px; } .crystal-loader-dots span { width: 10px; height: 10px; background: var(--crystal-gradient); border-radius: 50%; animation: crystal-bounce 1.4s ease-in-out infinite; box-shadow: 0 0 10px var(--crystal-glow); } .crystal-loader-dots span:nth-child(1) { animation-delay: 0s; } .crystal-loader-dots span:nth-child(2) { animation-delay: 0.2s; } .crystal-loader-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes crystal-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* ============================================ CRYSTAL TOOLTIPS ============================================ */ .crystal-tooltip { position: relative; cursor: help; } .crystal-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); padding: 8px 12px; font-size: 0.8rem; color: #e2e8f0; background: linear-gradient(135deg, rgba(26, 31, 46, 0.98), rgba(15, 23, 41, 0.98)); border: 1px solid var(--frost-border); border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .crystal-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(4px); border: 6px solid transparent; border-top-color: var(--frost-border); opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1001; } .crystal-tooltip:hover::after, .crystal-tooltip:hover::before { opacity: 1; visibility: visible; } /* ============================================ CRYSTAL ICONS ============================================ */ .crystal-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; } .crystal-icon svg { width: 100%; height: 100%; } /* Icon with glow effect */ .crystal-icon-glow { filter: drop-shadow(0 0 4px var(--crystal-glow)); } /* Icon container with background */ .crystal-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, rgba(168, 213, 229, 0.15), rgba(168, 213, 229, 0.05)); border: 1px solid var(--frost-border); border-radius: 10px; } .crystal-icon-box svg { width: 20px; height: 20px; color: var(--crystal-primary); } /* Large icon box (for features) */ .crystal-icon-box-lg { width: 64px; height: 64px; border-radius: 16px; } .crystal-icon-box-lg svg { width: 32px; height: 32px; } /* ============================================ CRYSTAL STATS/METRICS ============================================ */ .crystal-stat { text-align: center; padding: 20px; } .crystal-stat-value { font-family: 'Exo 2', sans-serif; font-size: 2.5rem; font-weight: 700; background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } .crystal-stat-label { font-size: 0.8rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } /* Stat with ring indicator */ .crystal-stat-ring { position: relative; width: 120px; height: 120px; margin: 0 auto 16px; } .crystal-stat-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .crystal-stat-ring-bg { fill: none; stroke: rgba(100, 116, 139, 0.2); stroke-width: 8; } .crystal-stat-ring-fill { fill: none; stroke: url(#crystal-gradient); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: calc(314 - (314 * var(--progress, 0) / 100)); transition: stroke-dashoffset 1s ease; filter: drop-shadow(0 0 6px var(--crystal-glow)); } .crystal-stat-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--crystal-primary); } /* ============================================ CRYSTAL TABS ============================================ */ .crystal-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(15, 23, 41, 0.6); border: 1px solid var(--frost-border); border-radius: 12px; } .crystal-tab { flex: 1; padding: 10px 20px; font-family: 'Exo 2', sans-serif; font-size: 0.9rem; font-weight: 500; color: #94a3b8; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .crystal-tab:hover { color: #e2e8f0; background: rgba(168, 213, 229, 0.1); } .crystal-tab.active { color: #0a0e17; background: var(--crystal-gradient); box-shadow: 0 0 20px var(--crystal-glow-soft); } /* ============================================ CRYSTAL AVATAR ============================================ */ .crystal-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid var(--frost-border); transition: all 0.3s ease; } .crystal-avatar img { width: 100%; height: 100%; object-fit: cover; } .crystal-avatar:hover { border-color: var(--crystal-primary); box-shadow: 0 0 20px var(--crystal-glow-soft); } /* Avatar with status indicator */ .crystal-avatar-status { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background: #10b981; border: 2px solid var(--void-surface); border-radius: 50%; } .crystal-avatar-status.offline { background: #64748b; } .crystal-avatar-status.busy { background: #ef4444; } .crystal-avatar-status.away { background: #f59e0b; } /* Avatar sizes */ .crystal-avatar-sm { width: 32px; height: 32px; } .crystal-avatar-lg { width: 64px; height: 64px; } .crystal-avatar-xl { width: 96px; height: 96px; } /* ============================================ CRYSTAL NAVIGATION ============================================ */ .crystal-nav { display: flex; gap: 8px; padding: 8px; background: rgba(15, 23, 41, 0.8); border: 1px solid var(--frost-border); border-radius: 16px; backdrop-filter: blur(10px); } .crystal-nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.9rem; color: #94a3b8; text-decoration: none; border-radius: 10px; transition: all 0.3s ease; } .crystal-nav-item:hover { color: #e2e8f0; background: rgba(168, 213, 229, 0.1); } .crystal-nav-item.active { color: var(--crystal-primary); background: rgba(168, 213, 229, 0.15); box-shadow: inset 0 0 20px rgba(168, 213, 229, 0.1); } .crystal-nav-item svg { width: 18px; height: 18px; } /* ============================================ COSMIC FROST CARDS - LIGHTWEIGHT VARIANT Everyday cards with crystal aesthetic Less DOM elements, better performance ============================================ */ /* Base frost card */ .crystal-frost-card { --frost-glow: 0; position: relative; padding: 24px; overflow: visible; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Use border-radius instead of clip-path to avoid cutting content */ border-radius: 12px; background: linear-gradient( 165deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100% ); /* Visible border */ border: 1px solid rgba(168, 213, 229, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(168, 213, 229, 0.08); } .crystal-frost-card:hover { --frost-glow: 1; transform: translateY(-3px); border-color: rgba(168, 213, 229, 0.25); box-shadow: 0 0 40px rgba(91, 164, 181, 0.08), 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(168, 213, 229, 0.15); } /* Top edge shine */ .crystal-frost-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.25) 20%, rgba(197, 232, 242, 0.45) 50%, rgba(168, 213, 229, 0.25) 80%, transparent 100% ); z-index: 2; transition: all 0.4s ease; border-radius: 12px 12px 0 0; } .crystal-frost-card:hover::before { background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.4) 20%, rgba(232, 246, 250, 0.7) 50%, rgba(168, 213, 229, 0.4) 80%, transparent 100% ); box-shadow: 0 0 10px rgba(168, 213, 229, 0.3); } /* Corner glow effect (no clip-path) */ .crystal-frost-card::after { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; background: radial-gradient( ellipse 100% 100% at 0% 0%, rgba(197, 232, 242, calc(0.06 + var(--frost-glow) * 0.12)) 0%, rgba(168, 213, 229, calc(0.02 + var(--frost-glow) * 0.06)) 40%, transparent 70% ); pointer-events: none; z-index: 2; transition: all 0.4s ease; border-radius: 12px 0 0 0; } /* Inner glow layer */ .frost-inner { position: absolute; inset: 0; background: linear-gradient( 178deg, rgba(168, 213, 229, 0.04) 0%, transparent 40% ); pointer-events: none; z-index: 1; } /* Content wrapper */ .frost-content { position: relative; z-index: 5; } /* Frost card variants */ .crystal-frost-card.frost-compact { padding: 18px; } .crystal-frost-card.frost-large { padding: 32px; } /* Frost card with subtle animation */ .crystal-frost-card.frost-animated { animation: frost-subtle-pulse 6s ease-in-out infinite; } @keyframes frost-subtle-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.12), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(168, 213, 229, 0.08); } 50% { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.18), 0 4px 25px rgba(0, 0, 0, 0.45), 0 0 30px rgba(91, 164, 181, 0.05), inset 0 1px 0 rgba(168, 213, 229, 0.12); } } /* Frost card with mouse tracking (optional enhancement) */ .crystal-frost-card[data-frost-track] { --mouse-x: 50%; --mouse-y: 50%; } .crystal-frost-card[data-frost-track] .frost-spotlight { position: absolute; inset: 0; background: radial-gradient( circle 200px at var(--mouse-x) var(--mouse-y), rgba(168, 213, 229, 0.06) 0%, transparent 60% ); pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .crystal-frost-card[data-frost-track]:hover .frost-spotlight { opacity: 1; } /* ============================================ FROST CARD GRID LAYOUTS ============================================ */ .frost-grid { display: grid; gap: 20px; } .frost-grid-2 { grid-template-columns: repeat(2, 1fr); } .frost-grid-3 { grid-template-columns: repeat(3, 1fr); } .frost-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .frost-grid-4 { grid-template-columns: repeat(2, 1fr); } .frost-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .frost-grid-4, .frost-grid-3, .frost-grid-2 { grid-template-columns: 1fr; } } /* ============================================ FROST STAT CARD ============================================ */ .frost-stat-card { text-align: center; } .frost-stat-card .frost-stat-value { font-family: 'Exo 2', sans-serif; font-size: 2.5rem; font-weight: 800; background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .frost-stat-card .frost-stat-label { color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 6px; } .frost-stat-card .frost-stat-icon { width: 48px; height: 48px; margin: 0 auto 12px; filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.3)); } /* ============================================ FROST FEATURE CARD ============================================ */ .frost-feature-card .frost-feature-icon { width: 56px; height: 56px; margin-bottom: 16px; padding: 12px; background: rgba(168, 213, 229, 0.08); border-radius: 12px; border: 1px solid rgba(168, 213, 229, 0.15); } .frost-feature-card .frost-feature-icon svg { width: 100%; height: 100%; } .frost-feature-card .frost-feature-title { font-family: 'Exo 2', sans-serif; font-size: 1.15rem; font-weight: 600; color: #f1f5f9; margin-bottom: 8px; } .frost-feature-card .frost-feature-text { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; } /* ============================================ FROST LIST CARD ============================================ */ .frost-list-card .frost-list { list-style: none; padding: 0; margin: 0; } .frost-list-card .frost-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(168, 213, 229, 0.08); color: #cbd5e1; font-size: 0.9rem; } .frost-list-card .frost-list li:last-child { border-bottom: none; } .frost-list-card .frost-list li svg { width: 18px; height: 18px; flex-shrink: 0; } /* ============================================ COSMIC CRYSTAL CARDS - PREMIUM VARIANT Premium cards with mouse-reactive lighting ============================================ */ /* Base cosmic card */ .crystal-cosmic { --mouse-x: 50%; --mouse-y: 50%; --light-intensity: 0; --corner-tl-glow: 0; --corner-tr-glow: 0; --corner-bl-glow: 0; --corner-br-glow: 0; --edge-top-glow: 0; --edge-left-glow: 0; --edge-right-glow: 0; --edge-bottom-glow: 0; position: relative; padding: 36px; overflow: hidden; transition: box-shadow 0.4s ease, transform 0.4s ease; } /* Cosmic Obsidian - Primary style */ .crystal-cosmic-obsidian { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); background: linear-gradient( 160deg, rgba(10, 14, 22, 1) 0%, rgba(6, 10, 16, 1) 50%, rgba(8, 12, 18, 1) 100% ); } /* Cosmic Emerald - Alternative style */ .crystal-cosmic-emerald { clip-path: polygon( 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px ); background: linear-gradient( 160deg, rgba(12, 18, 28, 1) 0%, rgba(8, 12, 22, 1) 50%, rgba(10, 14, 24, 1) 100% ); } /* Light source that follows mouse */ .cosmic-light-source { position: absolute; inset: 0; background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(197, 232, 242, calc(0.06 * var(--light-intensity))) 0%, rgba(168, 213, 229, calc(0.025 * var(--light-intensity))) 35%, transparent 65% ); pointer-events: none; z-index: 5; transition: opacity 0.3s ease; } /* Base mirror reflection */ .cosmic-mirror { position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient( 178deg, rgba(168, 213, 229, 0.09) 0%, rgba(127, 200, 220, 0.03) 40%, transparent 100% ); pointer-events: none; z-index: 1; } /* Deep glow from bottom */ .cosmic-depth { position: absolute; bottom: -25%; left: 12%; right: 12%; height: 70%; background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(91, 164, 181, 0.14) 0%, rgba(91, 164, 181, 0.04) 45%, transparent 75% ); filter: blur(20px); pointer-events: none; z-index: 1; opacity: 0.5; transition: opacity 0.4s ease; } .crystal-cosmic:hover .cosmic-depth { opacity: 1; } /* Cosmic star particles */ .cosmic-stars { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .cosmic-stars span { position: absolute; background: rgba(255, 255, 255, 0.9); border-radius: 50%; animation: cosmic-star-pulse 4s ease-in-out infinite; } .cosmic-stars span:nth-child(1) { top: 18%; left: 15%; width: 2px; height: 2px; animation-delay: 0s; } .cosmic-stars span:nth-child(2) { top: 30%; left: 75%; width: 1.5px; height: 1.5px; animation-delay: 0.6s; } .cosmic-stars span:nth-child(3) { top: 48%; left: 25%; width: 1px; height: 1px; animation-delay: 1.2s; } .cosmic-stars span:nth-child(4) { top: 38%; left: 85%; width: 1.5px; height: 1.5px; animation-delay: 1.8s; } .cosmic-stars span:nth-child(5) { top: 65%; left: 42%; width: 1.5px; height: 1.5px; animation-delay: 0.3s; } .cosmic-stars span:nth-child(6) { top: 22%; left: 52%; width: 1px; height: 1px; animation-delay: 2.1s; } .cosmic-stars span:nth-child(7) { top: 72%; left: 68%; width: 1px; height: 1px; animation-delay: 2.7s; } .cosmic-stars span:nth-child(8) { top: 55%; left: 12%; width: 1.5px; height: 1.5px; animation-delay: 0.9s; } @keyframes cosmic-star-pulse { 0%, 100% { opacity: 0.1; transform: scale(0.8); } 50% { opacity: 0.85; transform: scale(1); } } /* Nebula effect */ .cosmic-nebula { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .cosmic-nebula::before { content: ''; position: absolute; top: 8%; left: 5%; width: 45%; height: 55%; background: radial-gradient(ellipse at center, rgba(168, 213, 229, 0.04) 0%, transparent 70%); filter: blur(35px); animation: cosmic-nebula-float 11s ease-in-out infinite; } .cosmic-nebula::after { content: ''; position: absolute; bottom: 15%; right: 8%; width: 40%; height: 45%; background: radial-gradient(ellipse at center, rgba(127, 200, 220, 0.03) 0%, transparent 70%); filter: blur(30px); animation: cosmic-nebula-float 14s ease-in-out infinite reverse; } @keyframes cosmic-nebula-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8%, 6%); } } /* Soft edge glows */ .cosmic-edge-top { position: absolute; top: 0; left: 14px; right: 14px; height: 8px; background: linear-gradient( 180deg, rgba(197, 232, 242, calc(0.25 + var(--edge-top-glow) * 0.35)) 0%, rgba(168, 213, 229, calc(0.08 + var(--edge-top-glow) * 0.15)) 40%, transparent 100% ); z-index: 6; transition: all 0.2s ease-out; filter: blur(2px); opacity: calc(0.5 + var(--edge-top-glow) * 0.5); pointer-events: none; } .crystal-cosmic-emerald .cosmic-edge-top { left: 18px; right: 18px; } .cosmic-edge-left { position: absolute; top: 14px; left: 0; width: 6px; bottom: 14px; background: linear-gradient( 90deg, rgba(168, 213, 229, calc(0.12 + var(--edge-left-glow) * 0.2)) 0%, rgba(168, 213, 229, calc(0.04 + var(--edge-left-glow) * 0.08)) 50%, transparent 100% ); z-index: 6; transition: all 0.2s ease-out; filter: blur(2px); opacity: calc(0.3 + var(--edge-left-glow) * 0.7); pointer-events: none; } .crystal-cosmic-emerald .cosmic-edge-left { top: 18px; bottom: 18px; } .cosmic-edge-right { position: absolute; top: 14px; right: 0; width: 6px; bottom: 14px; background: linear-gradient( 270deg, rgba(127, 200, 220, calc(0.1 + var(--edge-right-glow) * 0.18)) 0%, rgba(127, 200, 220, calc(0.03 + var(--edge-right-glow) * 0.06)) 50%, transparent 100% ); z-index: 6; transition: all 0.2s ease-out; filter: blur(2px); opacity: calc(0.3 + var(--edge-right-glow) * 0.7); pointer-events: none; } .crystal-cosmic-emerald .cosmic-edge-right { top: 18px; bottom: 18px; } .cosmic-edge-bottom { position: absolute; bottom: 0; left: 14px; right: 14px; height: 6px; background: linear-gradient( 0deg, rgba(91, 164, 181, calc(0.15 + var(--edge-bottom-glow) * 0.25)) 0%, rgba(91, 164, 181, calc(0.05 + var(--edge-bottom-glow) * 0.1)) 50%, transparent 100% ); z-index: 6; transition: all 0.2s ease-out; filter: blur(2px); opacity: calc(0.3 + var(--edge-bottom-glow) * 0.7); pointer-events: none; } .crystal-cosmic-emerald .cosmic-edge-bottom { left: 18px; right: 18px; } /* Corner facets - 8% top, 6% bottom default */ .cosmic-corner { position: absolute; pointer-events: none; z-index: 4; transition: all 0.2s ease-out; } /* Top-left corner */ .cosmic-corner-tl { top: 0; left: 0; width: 65px; height: 65px; background: radial-gradient( ellipse 130% 130% at 0% 0%, rgba(232, 246, 250, calc(0.08 + var(--corner-tl-glow) * 0.4)) 0%, rgba(197, 232, 242, calc(0.04 + var(--corner-tl-glow) * 0.18)) 35%, transparent 65% ); clip-path: polygon(14px 0, 65px 0, 0 65px, 0 14px); filter: blur(1px) drop-shadow(0 0 calc(var(--corner-tl-glow) * 12px) rgba(197, 232, 242, calc(var(--corner-tl-glow) * 0.5))); } .crystal-cosmic-emerald .cosmic-corner-tl { width: 70px; height: 70px; clip-path: polygon(18px 0, 70px 0, 0 70px, 0 18px); } /* Top-right corner */ .cosmic-corner-tr { top: 0; right: 0; width: 65px; height: 65px; background: radial-gradient( ellipse 130% 130% at 100% 0%, rgba(197, 232, 242, calc(0.08 + var(--corner-tr-glow) * 0.35)) 0%, rgba(168, 213, 229, calc(0.04 + var(--corner-tr-glow) * 0.15)) 35%, transparent 65% ); clip-path: polygon(0 0, 51px 0, 65px 14px, 65px 65px); filter: blur(1px) drop-shadow(0 0 calc(var(--corner-tr-glow) * 10px) rgba(168, 213, 229, calc(var(--corner-tr-glow) * 0.45))); } .crystal-cosmic-emerald .cosmic-corner-tr { width: 70px; height: 70px; clip-path: polygon(0 0, 52px 0, 70px 18px, 70px 70px); } /* Bottom-left corner */ .cosmic-corner-bl { bottom: 0; left: 0; width: 65px; height: 65px; background: radial-gradient( ellipse 130% 130% at 0% 100%, rgba(127, 200, 220, calc(0.06 + var(--corner-bl-glow) * 0.28)) 0%, rgba(91, 164, 181, calc(0.03 + var(--corner-bl-glow) * 0.12)) 35%, transparent 65% ); clip-path: polygon(0 0, 0 51px, 14px 65px, 65px 65px); filter: blur(1px) drop-shadow(0 0 calc(var(--corner-bl-glow) * 8px) rgba(91, 164, 181, calc(var(--corner-bl-glow) * 0.4))); } .crystal-cosmic-emerald .cosmic-corner-bl { width: 70px; height: 70px; clip-path: polygon(0 0, 0 52px, 18px 70px, 70px 70px); } /* Bottom-right corner */ .cosmic-corner-br { bottom: 0; right: 0; width: 65px; height: 65px; background: radial-gradient( ellipse 130% 130% at 100% 100%, rgba(127, 200, 220, calc(0.06 + var(--corner-br-glow) * 0.24)) 0%, rgba(91, 164, 181, calc(0.03 + var(--corner-br-glow) * 0.1)) 35%, transparent 65% ); clip-path: polygon(65px 0, 65px 51px, 51px 65px, 0 65px); filter: blur(1px) drop-shadow(0 0 calc(var(--corner-br-glow) * 7px) rgba(127, 200, 220, calc(var(--corner-br-glow) * 0.35))); } .crystal-cosmic-emerald .cosmic-corner-br { width: 70px; height: 70px; clip-path: polygon(70px 0, 70px 52px, 52px 70px, 0 70px); } /* ============================================ COSMIC GOLD VARIANT Premium gold styling for Elite/VIP sections ============================================ */ .crystal-cosmic-gold { clip-path: polygon( 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px ); background: linear-gradient( 160deg, rgba(20, 16, 10, 1) 0%, rgba(15, 12, 8, 1) 50%, rgba(18, 14, 10, 1) 100% ); } .crystal-cosmic-gold .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(251, 191, 36, calc(0.08 * var(--light-intensity))) 0%, rgba(245, 158, 11, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-gold .cosmic-mirror { background: linear-gradient( 178deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.04) 40%, transparent 100% ); } .crystal-cosmic-gold .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.06) 45%, transparent 75% ); } .crystal-cosmic-gold .cosmic-nebula span { background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%); } .crystal-cosmic-gold .cosmic-stars span { background: #fbbf24; box-shadow: 0 0 4px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.6); } .crystal-cosmic-gold .cosmic-edge-top { background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(251, 191, 36, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(251, 191, 36, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-gold .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, calc(0.06 + var(--edge-bottom-glow, 0) * 0.3)) 20%, rgba(251, 191, 36, calc(0.1 + var(--edge-bottom-glow, 0) * 0.4)) 50%, rgba(251, 191, 36, calc(0.06 + var(--edge-bottom-glow, 0) * 0.3)) 80%, transparent 100% ); } .crystal-cosmic-gold .cosmic-edge-left, .crystal-cosmic-gold .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(251, 191, 36, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(251, 191, 36, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(251, 191, 36, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-gold .cosmic-corner { background: radial-gradient( circle at center, rgba(251, 191, 36, 0.6) 0%, rgba(251, 191, 36, 0.25) 40%, transparent 70% ); } .crystal-cosmic-gold .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-gold .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-gold .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-gold .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-gold { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(251, 191, 36, 0.08), inset 0 1px 0 rgba(251, 191, 36, 0.15); } .crystal-cosmic-gold:hover { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 60px rgba(251, 191, 36, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(251, 191, 36, 0.12), inset 0 1px 0 rgba(251, 191, 36, 0.25); transform: translateY(-4px); } /* ============================================ COSMIC PURPLE VARIANT (Commander Tier) ============================================ */ .crystal-cosmic-purple { clip-path: polygon( 15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px ); background: linear-gradient( 160deg, rgba(18, 10, 20, 1) 0%, rgba(12, 8, 15, 1) 50%, rgba(15, 10, 18, 1) 100% ); } .crystal-cosmic-purple .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(167, 139, 250, calc(0.08 * var(--light-intensity))) 0%, rgba(139, 92, 246, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-purple .cosmic-mirror { background: linear-gradient( 178deg, rgba(167, 139, 250, 0.12) 0%, rgba(139, 92, 246, 0.04) 40%, transparent 100% ); } .crystal-cosmic-purple .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(167, 139, 250, 0.18) 0%, rgba(139, 92, 246, 0.06) 45%, transparent 75% ); } .crystal-cosmic-purple .cosmic-nebula span { background: radial-gradient(circle, rgba(167, 139, 250, 0.5) 0%, transparent 70%); } .crystal-cosmic-purple .cosmic-stars span { background: #a78bfa; box-shadow: 0 0 4px #a78bfa, 0 0 8px rgba(167, 139, 250, 0.6); } .crystal-cosmic-purple .cosmic-edge-top { background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(167, 139, 250, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(167, 139, 250, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-purple .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, calc(0.06 + var(--edge-bottom-glow, 0) * 0.3)) 20%, rgba(167, 139, 250, calc(0.1 + var(--edge-bottom-glow, 0) * 0.4)) 50%, rgba(167, 139, 250, calc(0.06 + var(--edge-bottom-glow, 0) * 0.3)) 80%, transparent 100% ); } .crystal-cosmic-purple .cosmic-edge-left, .crystal-cosmic-purple .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(167, 139, 250, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(167, 139, 250, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(167, 139, 250, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-purple .cosmic-corner { background: radial-gradient( circle at center, rgba(167, 139, 250, 0.6) 0%, rgba(167, 139, 250, 0.25) 40%, transparent 70% ); } .crystal-cosmic-purple .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-purple .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-purple .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-purple .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-purple { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(167, 139, 250, 0.08), inset 0 1px 0 rgba(167, 139, 250, 0.15); } .crystal-cosmic-purple:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4), 0 0 60px rgba(167, 139, 250, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(167, 139, 250, 0.12), inset 0 1px 0 rgba(167, 139, 250, 0.25); transform: translateY(-4px); } /* ============================================ COSMIC CYAN/STELLAR VARIANT (Navigator Tier) ============================================ */ .crystal-cosmic-stellar { clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px ); background: linear-gradient( 160deg, rgba(10, 16, 20, 1) 0%, rgba(8, 12, 18, 1) 50%, rgba(10, 14, 20, 1) 100% ); } .crystal-cosmic-stellar .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(168, 213, 229, calc(0.08 * var(--light-intensity))) 0%, rgba(96, 165, 250, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-stellar .cosmic-mirror { background: linear-gradient( 178deg, rgba(168, 213, 229, 0.12) 0%, rgba(96, 165, 250, 0.04) 40%, transparent 100% ); } .crystal-cosmic-stellar .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(168, 213, 229, 0.18) 0%, rgba(96, 165, 250, 0.06) 45%, transparent 75% ); } .crystal-cosmic-stellar .cosmic-nebula span { background: radial-gradient(circle, rgba(168, 213, 229, 0.5) 0%, transparent 70%); } .crystal-cosmic-stellar .cosmic-stars span { background: #A8D5E5; box-shadow: 0 0 4px #A8D5E5, 0 0 8px rgba(168, 213, 229, 0.6); } .crystal-cosmic-stellar .cosmic-edge-top { background: linear-gradient(90deg, transparent 0%, rgba(168, 213, 229, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(168, 213, 229, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(168, 213, 229, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-stellar .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(168, 213, 229, calc(0.06 + var(--edge-bottom-glow, 0) * 0.3)) 20%, rgba(168, 213, 229, calc(0.1 + var(--edge-bottom-glow, 0) * 0.4)) 50%, rgba(168, 213, 229, calc(0.06 + var(--edge-bottom-glow, 0) * 0.3)) 80%, transparent 100% ); } .crystal-cosmic-stellar .cosmic-edge-left, .crystal-cosmic-stellar .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(168, 213, 229, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(168, 213, 229, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(168, 213, 229, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-stellar .cosmic-corner { background: radial-gradient( circle at center, rgba(168, 213, 229, 0.6) 0%, rgba(168, 213, 229, 0.25) 40%, transparent 70% ); } .crystal-cosmic-stellar .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-stellar .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-stellar .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-stellar .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-stellar { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(168, 213, 229, 0.08), inset 0 1px 0 rgba(168, 213, 229, 0.15); } .crystal-cosmic-stellar:hover { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.4), 0 0 60px rgba(168, 213, 229, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(168, 213, 229, 0.12), inset 0 1px 0 rgba(168, 213, 229, 0.25); transform: translateY(-4px); } /* Cosmic card shadows */ .crystal-cosmic { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.1), 0 4px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(168, 213, 229, 0.08); } .crystal-cosmic:hover { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.22), 0 0 50px rgba(91, 164, 181, 0.1), 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(168, 213, 229, 0.15); transform: translateY(-4px); } /* ============================================ COSMIC PURPLE VARIANT For security/commander themed sections ============================================ */ .crystal-cosmic-purple { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); background: linear-gradient( 160deg, rgba(18, 12, 28, 1) 0%, rgba(12, 8, 22, 1) 50%, rgba(15, 10, 25, 1) 100% ); } .crystal-cosmic-purple .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(167, 139, 250, calc(0.08 * var(--light-intensity))) 0%, rgba(139, 92, 246, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-purple .cosmic-mirror { background: linear-gradient( 178deg, rgba(167, 139, 250, 0.12) 0%, rgba(139, 92, 246, 0.04) 40%, transparent 100% ); } .crystal-cosmic-purple .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(167, 139, 250, 0.18) 0%, rgba(139, 92, 246, 0.06) 45%, transparent 75% ); } .crystal-cosmic-purple .cosmic-nebula span { background: radial-gradient(circle, rgba(167, 139, 250, 0.5) 0%, transparent 70%); } .crystal-cosmic-purple .cosmic-stars span { background: #a78bfa; box-shadow: 0 0 4px #a78bfa, 0 0 8px rgba(167, 139, 250, 0.6); } .crystal-cosmic-purple .cosmic-edge-top, .crystal-cosmic-purple .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(167, 139, 250, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(167, 139, 250, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-purple .cosmic-edge-left, .crystal-cosmic-purple .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(167, 139, 250, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(167, 139, 250, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(167, 139, 250, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-purple .cosmic-corner { background: radial-gradient( circle at center, rgba(167, 139, 250, 0.6) 0%, rgba(167, 139, 250, 0.25) 40%, transparent 70% ); } .crystal-cosmic-purple .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-purple .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-purple .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-purple .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-purple { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(167, 139, 250, 0.08), inset 0 1px 0 rgba(167, 139, 250, 0.15); } .crystal-cosmic-purple:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4), 0 0 60px rgba(167, 139, 250, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(167, 139, 250, 0.12), inset 0 1px 0 rgba(167, 139, 250, 0.25); transform: translateY(-4px); } /* ============================================ COSMIC ROSE VARIANT For alerts/warnings/critical sections ============================================ */ .crystal-cosmic-rose { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); background: linear-gradient( 160deg, rgba(28, 12, 18, 1) 0%, rgba(22, 8, 12, 1) 50%, rgba(25, 10, 15, 1) 100% ); } .crystal-cosmic-rose .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(244, 114, 182, calc(0.08 * var(--light-intensity))) 0%, rgba(236, 72, 153, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-rose .cosmic-mirror { background: linear-gradient( 178deg, rgba(244, 114, 182, 0.12) 0%, rgba(236, 72, 153, 0.04) 40%, transparent 100% ); } .crystal-cosmic-rose .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(244, 114, 182, 0.18) 0%, rgba(236, 72, 153, 0.06) 45%, transparent 75% ); } .crystal-cosmic-rose .cosmic-nebula span { background: radial-gradient(circle, rgba(244, 114, 182, 0.5) 0%, transparent 70%); } .crystal-cosmic-rose .cosmic-stars span { background: #f472b6; box-shadow: 0 0 4px #f472b6, 0 0 8px rgba(244, 114, 182, 0.6); } .crystal-cosmic-rose .cosmic-edge-top, .crystal-cosmic-rose .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(244, 114, 182, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(244, 114, 182, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(244, 114, 182, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-rose .cosmic-edge-left, .crystal-cosmic-rose .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(244, 114, 182, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(244, 114, 182, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(244, 114, 182, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-rose .cosmic-corner { background: radial-gradient( circle at center, rgba(244, 114, 182, 0.6) 0%, rgba(244, 114, 182, 0.25) 40%, transparent 70% ); } .crystal-cosmic-rose .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-rose .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-rose .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-rose .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-rose { box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(244, 114, 182, 0.08), inset 0 1px 0 rgba(244, 114, 182, 0.15); } .crystal-cosmic-rose:hover { box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.4), 0 0 60px rgba(244, 114, 182, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(244, 114, 182, 0.12), inset 0 1px 0 rgba(244, 114, 182, 0.25); transform: translateY(-4px); } /* ============================================ COSMIC SUCCESS VARIANT For success states and positive actions ============================================ */ .crystal-cosmic-success { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); background: linear-gradient( 160deg, rgba(10, 28, 18, 1) 0%, rgba(8, 22, 14, 1) 50%, rgba(10, 25, 16, 1) 100% ); } .crystal-cosmic-success .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(16, 185, 129, calc(0.08 * var(--light-intensity))) 0%, rgba(5, 150, 105, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-success .cosmic-mirror { background: linear-gradient( 178deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.04) 40%, transparent 100% ); } .crystal-cosmic-success .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.06) 45%, transparent 75% ); } .crystal-cosmic-success .cosmic-nebula span { background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, transparent 70%); } .crystal-cosmic-success .cosmic-stars span { background: #10b981; box-shadow: 0 0 4px #10b981, 0 0 8px rgba(16, 185, 129, 0.6); } .crystal-cosmic-success .cosmic-edge-top, .crystal-cosmic-success .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(16, 185, 129, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(16, 185, 129, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-success .cosmic-edge-left, .crystal-cosmic-success .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(16, 185, 129, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(16, 185, 129, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-success .cosmic-corner { background: radial-gradient( circle at center, rgba(16, 185, 129, 0.6) 0%, rgba(16, 185, 129, 0.25) 40%, transparent 70% ); } .crystal-cosmic-success .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-success .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-success .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-success .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-success { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(16, 185, 129, 0.15); } .crystal-cosmic-success:hover { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4), 0 0 60px rgba(16, 185, 129, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(16, 185, 129, 0.25); transform: translateY(-4px); } /* ============================================ COSMIC ALERT VARIANT For danger/critical alerts ============================================ */ .crystal-cosmic-alert { clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); background: linear-gradient( 160deg, rgba(28, 12, 12, 1) 0%, rgba(22, 8, 8, 1) 50%, rgba(25, 10, 10, 1) 100% ); } .crystal-cosmic-alert .cosmic-light-source { background: radial-gradient( circle 350px at var(--mouse-x) var(--mouse-y), rgba(239, 68, 68, calc(0.08 * var(--light-intensity))) 0%, rgba(220, 38, 38, calc(0.03 * var(--light-intensity))) 35%, transparent 65% ); } .crystal-cosmic-alert .cosmic-mirror { background: linear-gradient( 178deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.04) 40%, transparent 100% ); } .crystal-cosmic-alert .cosmic-depth { background: radial-gradient( ellipse 85% 65% at 50% 100%, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.06) 45%, transparent 75% ); } .crystal-cosmic-alert .cosmic-nebula span { background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 70%); } .crystal-cosmic-alert .cosmic-stars span { background: #ef4444; box-shadow: 0 0 4px #ef4444, 0 0 8px rgba(239, 68, 68, 0.6); } .crystal-cosmic-alert .cosmic-edge-top, .crystal-cosmic-alert .cosmic-edge-bottom { background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 20%, rgba(239, 68, 68, calc(0.15 + var(--edge-top-glow, 0) * 0.5)) 50%, rgba(239, 68, 68, calc(0.1 + var(--edge-top-glow, 0) * 0.4)) 80%, transparent 100% ); } .crystal-cosmic-alert .cosmic-edge-left, .crystal-cosmic-alert .cosmic-edge-right { background: linear-gradient(180deg, transparent 0%, rgba(239, 68, 68, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 20%, rgba(239, 68, 68, calc(0.1 + var(--edge-left-glow, 0) * 0.35)) 50%, rgba(239, 68, 68, calc(0.06 + var(--edge-left-glow, 0) * 0.25)) 80%, transparent 100% ); } .crystal-cosmic-alert .cosmic-corner { background: radial-gradient( circle at center, rgba(239, 68, 68, 0.6) 0%, rgba(239, 68, 68, 0.25) 40%, transparent 70% ); } .crystal-cosmic-alert .cosmic-corner-tl { opacity: calc(0.1 + var(--corner-tl-glow, 0) * 0.75); } .crystal-cosmic-alert .cosmic-corner-tr { opacity: calc(0.1 + var(--corner-tr-glow, 0) * 0.75); } .crystal-cosmic-alert .cosmic-corner-bl { opacity: calc(0.08 + var(--corner-bl-glow, 0) * 0.65); } .crystal-cosmic-alert .cosmic-corner-br { opacity: calc(0.08 + var(--corner-br-glow, 0) * 0.65); } .crystal-cosmic-alert { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 4px 30px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(239, 68, 68, 0.15); } .crystal-cosmic-alert:hover { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5), 0 15px 40px rgba(239, 68, 68, 0.12), inset 0 1px 0 rgba(239, 68, 68, 0.25); transform: translateY(-4px); } /* ============================================ SIMPLIFIED COSMIC CARDS Lighter weight - fewer internal elements ============================================ */ .cosmic-card-simple { --mouse-x: 50%; --mouse-y: 50%; --light-intensity: 0; position: relative; padding: 24px; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px ); background: linear-gradient(160deg, rgba(12, 18, 28, 0.95) 0%, rgba(8, 12, 22, 0.98) 100%); } .cosmic-card-simple::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle 300px at var(--mouse-x) var(--mouse-y), rgba(168, 213, 229, calc(0.08 * var(--light-intensity))) 0%, transparent 60% ); pointer-events: none; z-index: 1; } .cosmic-card-simple::after { content: ''; position: absolute; inset: 0; background: linear-gradient(178deg, rgba(168, 213, 229, 0.08) 0%, transparent 50%); pointer-events: none; z-index: 1; } .cosmic-card-simple > * { position: relative; z-index: 2; } .cosmic-card-simple { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.12), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(168, 213, 229, 0.1); } .cosmic-card-simple:hover { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.25), 0 0 40px rgba(91, 164, 181, 0.1), 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(168, 213, 229, 0.15); transform: translateY(-3px); } /* Simple variants */ .cosmic-card-simple.cosmic-simple-purple { background: linear-gradient(160deg, rgba(18, 12, 28, 0.95) 0%, rgba(12, 8, 22, 0.98) 100%); } .cosmic-card-simple.cosmic-simple-purple::before { background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), rgba(167, 139, 250, calc(0.08 * var(--light-intensity))) 0%, transparent 60%); } .cosmic-card-simple.cosmic-simple-purple::after { background: linear-gradient(178deg, rgba(167, 139, 250, 0.08) 0%, transparent 50%); } .cosmic-card-simple.cosmic-simple-purple { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(167, 139, 250, 0.1); } .cosmic-card-simple.cosmic-simple-purple:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 0 40px rgba(167, 139, 250, 0.1), 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(167, 139, 250, 0.15); } .cosmic-card-simple.cosmic-simple-gold { background: linear-gradient(160deg, rgba(20, 16, 10, 0.95) 0%, rgba(15, 12, 8, 0.98) 100%); } .cosmic-card-simple.cosmic-simple-gold::before { background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), rgba(251, 191, 36, calc(0.08 * var(--light-intensity))) 0%, transparent 60%); } .cosmic-card-simple.cosmic-simple-gold::after { background: linear-gradient(178deg, rgba(251, 191, 36, 0.08) 0%, transparent 50%); } .cosmic-card-simple.cosmic-simple-gold { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(251, 191, 36, 0.1); } .cosmic-card-simple.cosmic-simple-gold:hover { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25), 0 0 40px rgba(251, 191, 36, 0.1), 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(251, 191, 36, 0.15); } .cosmic-card-simple.cosmic-simple-success { background: linear-gradient(160deg, rgba(10, 28, 18, 0.95) 0%, rgba(8, 22, 14, 0.98) 100%); } .cosmic-card-simple.cosmic-simple-success::before { background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), rgba(16, 185, 129, calc(0.08 * var(--light-intensity))) 0%, transparent 60%); } .cosmic-card-simple.cosmic-simple-success::after { background: linear-gradient(178deg, rgba(16, 185, 129, 0.08) 0%, transparent 50%); } .cosmic-card-simple.cosmic-simple-success { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(16, 185, 129, 0.1); } .cosmic-card-simple.cosmic-simple-success:hover { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 0 40px rgba(16, 185, 129, 0.1), 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(16, 185, 129, 0.15); } .cosmic-card-simple.cosmic-simple-alert { background: linear-gradient(160deg, rgba(28, 12, 12, 0.95) 0%, rgba(22, 8, 8, 0.98) 100%); } .cosmic-card-simple.cosmic-simple-alert::before { background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), rgba(239, 68, 68, calc(0.08 * var(--light-intensity))) 0%, transparent 60%); } .cosmic-card-simple.cosmic-simple-alert::after { background: linear-gradient(178deg, rgba(239, 68, 68, 0.08) 0%, transparent 50%); } .cosmic-card-simple.cosmic-simple-alert { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12), 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(239, 68, 68, 0.1); } .cosmic-card-simple.cosmic-simple-alert:hover { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 0 40px rgba(239, 68, 68, 0.1), 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(239, 68, 68, 0.15); } /* Cosmic card content layer */ .cosmic-content { position: relative; z-index: 10; } /* Touch device fallback */ @media (hover: none) { .cosmic-light-source { display: none; } .crystal-cosmic { --corner-tl-glow: 0.25; --corner-tr-glow: 0.15; --corner-bl-glow: 0.1; --corner-br-glow: 0.08; --edge-top-glow: 0.3; } } /* ============================================ COSMIC LIGHT CARDS - EVERYDAY VARIANTS Lighter weight cards with subtle effects ============================================ */ /* Base light card - simpler structure */ .crystal-light { --mouse-x: 50%; --mouse-y: 50%; --light-intensity: 0; --shine-opacity: 0; position: relative; padding: 24px; overflow: hidden; transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); border-radius: 12px; } /* Frost variant - clean frosted glass */ .crystal-light-frost { background: linear-gradient( 155deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 16, 32, 0.9) 100% ); border: 1px solid rgba(168, 213, 229, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Glass variant - more transparent */ .crystal-light-glass { background: linear-gradient( 155deg, rgba(15, 23, 42, 0.65) 0%, rgba(10, 16, 32, 0.75) 100% ); border: 1px solid rgba(168, 213, 229, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Steel variant - solid, less transparency */ .crystal-light-steel { background: linear-gradient( 155deg, rgba(18, 26, 42, 0.95) 0%, rgba(12, 18, 32, 0.98) 100% ); border: 1px solid rgba(168, 213, 229, 0.1); } /* Mouse-following shine effect */ .light-shine { position: absolute; inset: 0; background: radial-gradient( circle 200px at var(--mouse-x) var(--mouse-y), rgba(168, 213, 229, calc(0.08 * var(--light-intensity))) 0%, rgba(168, 213, 229, calc(0.02 * var(--light-intensity))) 50%, transparent 70% ); pointer-events: none; z-index: 1; opacity: var(--shine-opacity); transition: opacity 0.3s ease; } /* Top edge highlight */ .light-edge { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.2) 20%, rgba(197, 232, 242, calc(0.35 + var(--light-intensity) * 0.25)) 50%, rgba(168, 213, 229, 0.2) 80%, transparent 100% ); z-index: 2; transition: all 0.3s ease; } .crystal-light:hover .light-edge { background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.35) 20%, rgba(232, 246, 250, 0.6) 50%, rgba(168, 213, 229, 0.35) 80%, transparent 100% ); box-shadow: 0 0 8px rgba(168, 213, 229, 0.2); } /* Corner accents - subtle */ .light-corner-tl { position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: radial-gradient( ellipse 150% 150% at 0% 0%, rgba(197, 232, 242, calc(0.06 + var(--light-intensity) * 0.15)) 0%, transparent 70% ); pointer-events: none; z-index: 1; transition: all 0.3s ease; } .light-corner-tr { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: radial-gradient( ellipse 150% 150% at 100% 0%, rgba(168, 213, 229, calc(0.04 + var(--light-intensity) * 0.1)) 0%, transparent 70% ); pointer-events: none; z-index: 1; transition: all 0.3s ease; } /* Light card content */ .light-content { position: relative; z-index: 5; } /* Shadows and hover */ .crystal-light { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(168, 213, 229, 0.05); } .crystal-light:hover { border-color: rgba(168, 213, 229, 0.25); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(91, 164, 181, 0.08), inset 0 1px 0 rgba(168, 213, 229, 0.1); transform: translateY(-2px); } /* Faceted light variant - using border-radius for corners */ .crystal-light-faceted { border-radius: 10px; } .crystal-light-faceted .light-edge { left: 10%; right: 10%; } /* Touch fallback for light cards */ @media (hover: none) { .light-shine { display: none; } .crystal-light { --light-intensity: 0.5; } } /* ============================================ COSMIC CARD SIZES ============================================ */ .crystal-cosmic-sm, .crystal-light-sm { padding: 20px; } .crystal-cosmic-lg, .crystal-light-lg { padding: 32px 40px; } /* ============================================ COSMIC CARD FEATURE STYLES ============================================ */ /* Feature card with icon */ .cosmic-feature-icon { width: 56px; height: 56px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(168, 213, 229, 0.12) 0%, rgba(91, 164, 181, 0.06) 100%); border: 1px solid rgba(168, 213, 229, 0.2); border-radius: 12px; } .cosmic-feature-icon svg { width: 28px; height: 28px; } .cosmic-feature-title { font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 700; color: #f1f5f9; margin-bottom: 10px; } .cosmic-feature-text { color: #94a3b8; font-size: 0.95rem; line-height: 1.65; } /* Stats card */ .cosmic-stat-value { font-family: 'Exo 2', sans-serif; font-size: 2.5rem; font-weight: 800; background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .cosmic-stat-label { color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; } /* Pricing card highlight */ .crystal-cosmic-highlight, .crystal-light-highlight { border-color: rgba(168, 213, 229, 0.4) !important; box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.3), 0 0 60px rgba(91, 164, 181, 0.15), 0 20px 50px rgba(0, 0, 0, 0.4) !important; } .crystal-cosmic-highlight::before, .crystal-light-highlight::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px; background: var(--crystal-gradient); border-radius: 2px; z-index: 10; } /* ============================================ UTILITY CLASSES ============================================ */ /* Text with crystal gradient */ .crystal-text { background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ INTEGRATION STYLES Apply crystal effects to existing card classes ============================================ */ /* Apply light frost effect to existing tour-feature cards */ .tour-feature.crystal-enhanced { background: linear-gradient(155deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 16, 32, 0.9) 100%); border: 1px solid rgba(168, 213, 229, 0.12); position: relative; overflow: hidden; } .tour-feature.crystal-enhanced::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(168, 213, 229, 0.2) 20%, rgba(197, 232, 242, 0.35) 50%, rgba(168, 213, 229, 0.2) 80%, transparent 100%); z-index: 2; } .tour-feature.crystal-enhanced:hover { border-color: rgba(168, 213, 229, 0.25); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(91, 164, 181, 0.08); } /* Card enhancement - add to any existing card */ .card-crystal-frost { background: linear-gradient(155deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 16, 32, 0.9) 100%) !important; border: 1px solid rgba(168, 213, 229, 0.12) !important; position: relative; overflow: hidden; transition: all 0.35s ease !important; } .card-crystal-frost::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(168, 213, 229, 0.2) 20%, rgba(197, 232, 242, 0.35) 50%, rgba(168, 213, 229, 0.2) 80%, transparent 100%); z-index: 2; pointer-events: none; } .card-crystal-frost:hover { border-color: rgba(168, 213, 229, 0.25) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(91, 164, 181, 0.08) !important; transform: translateY(-3px); } /* Stats card enhancement */ .stat-card-crystal { background: linear-gradient(155deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 16, 32, 0.95) 100%); border: 1px solid rgba(168, 213, 229, 0.1); border-radius: 12px; padding: 24px; position: relative; overflow: hidden; transition: all 0.35s ease; } .stat-card-crystal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--crystal-gradient); opacity: 0.6; } .stat-card-crystal:hover { border-color: rgba(168, 213, 229, 0.2); box-shadow: 0 0 30px rgba(91, 164, 181, 0.1); } /* Pricing card enhancement */ .pricing-card-crystal { background: linear-gradient(160deg, rgba(10, 14, 22, 0.95) 0%, rgba(6, 10, 16, 0.98) 100%); border: 1px solid rgba(168, 213, 229, 0.08); border-radius: 16px; padding: 32px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .pricing-card-crystal::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(168, 213, 229, 0.3) 50%, transparent 100%); } .pricing-card-crystal:hover { border-color: rgba(168, 213, 229, 0.2); box-shadow: 0 0 50px rgba(91, 164, 181, 0.1), 0 20px 40px rgba(0, 0, 0, 0.4); transform: translateY(-4px); } .pricing-card-crystal.featured { border-color: rgba(168, 213, 229, 0.3); box-shadow: 0 0 60px rgba(91, 164, 181, 0.15), 0 20px 50px rgba(0, 0, 0, 0.4); } .pricing-card-crystal.featured::before { height: 2px; background: var(--crystal-gradient); left: 10%; right: 10%; } /* Hub/Dashboard card enhancement */ .hub-card-crystal { background: linear-gradient(155deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 16, 32, 0.9) 100%); border: 1px solid rgba(168, 213, 229, 0.1); border-radius: 14px; padding: 24px; position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.35s ease; } .hub-card-crystal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(168, 213, 229, 0.25) 30%, rgba(197, 232, 242, 0.4) 50%, rgba(168, 213, 229, 0.25) 70%, transparent 100%); } .hub-card-crystal:hover { border-color: rgba(168, 213, 229, 0.22); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 40px rgba(91, 164, 181, 0.08); transform: translateY(-2px); } /* Alert/Banner crystal style */ .alert-crystal { background: linear-gradient(155deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 16, 32, 0.95) 100%); border: 1px solid rgba(168, 213, 229, 0.15); border-left: 3px solid var(--crystal-primary); border-radius: 0 12px 12px 0; padding: 20px 24px; position: relative; } .alert-crystal.alert-success { border-left-color: #10b981; } .alert-crystal.alert-warning { border-left-color: #f59e0b; } .alert-crystal.alert-danger { border-left-color: #ef4444; } /* Button crystal enhancement */ .btn-crystal { background: var(--crystal-gradient) !important; border: none !important; color: #0a0e17 !important; font-weight: 600; padding: 12px 28px; border-radius: 8px; position: relative; overflow: hidden; transition: all 0.3s ease; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); } .btn-crystal::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s ease; } .btn-crystal:hover::before { left: 100%; } .btn-crystal:hover { box-shadow: 0 0 30px rgba(168, 213, 229, 0.4); transform: translateY(-2px); } .btn-crystal-outline { background: transparent !important; border: 1px solid rgba(168, 213, 229, 0.4) !important; color: var(--crystal-primary) !important; font-weight: 600; padding: 12px 28px; border-radius: 8px; transition: all 0.3s ease; } .btn-crystal-outline:hover { background: rgba(168, 213, 229, 0.1) !important; border-color: var(--crystal-primary) !important; box-shadow: 0 0 20px rgba(168, 213, 229, 0.2); } /* ============================================ AUTO-ENHANCE EXISTING CARDS Automatically apply crystal frost to tour-feature ============================================ */ /* Tour feature cards - crystal frost upgrade */ .tour-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .tour-feature { position: relative; overflow: visible; padding: 1.5rem; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Crystal frost background */ background: linear-gradient( 165deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100% ); /* Use border-radius instead of clip-path */ border-radius: 12px; /* Visible border */ border: 1px solid rgba(168, 213, 229, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(168, 213, 229, 0.08); } .tour-feature::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.25) 20%, rgba(197, 232, 242, 0.45) 50%, rgba(168, 213, 229, 0.25) 80%, transparent 100% ); z-index: 2; transition: all 0.4s ease; border-radius: 12px 12px 0 0; } /* Remove corner accent pseudo-element */ .tour-feature::after { display: none; } .tour-feature:hover { transform: translateY(-3px); border-color: rgba(168, 213, 229, 0.25); box-shadow: 0 0 40px rgba(91, 164, 181, 0.08), 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(168, 213, 229, 0.15); } .tour-feature:hover::before { background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.4) 20%, rgba(232, 246, 250, 0.7) 50%, rgba(168, 213, 229, 0.4) 80%, transparent 100% ); box-shadow: 0 0 10px rgba(168, 213, 229, 0.3); } .tour-feature h4 { color: #f1f5f9; margin-bottom: 0.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: 'Exo 2', sans-serif; font-weight: 600; } .tour-feature p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; } .tour-feature .tier-badge { font-size: 0.65rem; padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .tier-badge.free { background: rgba(100, 116, 139, 0.2); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.3); } .tier-badge.navigator { background: rgba(168, 213, 229, 0.15); color: var(--crystal-primary); border: 1px solid rgba(168, 213, 229, 0.3); } .tier-badge.commander { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.3); } /* Tour section styling enhancements */ .tour-section { margin-bottom: 4rem; padding: 2rem; background: rgba(10, 14, 22, 0.5); border-radius: 20px; border: 1px solid rgba(168, 213, 229, 0.06); } .tour-section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .tour-section-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(168, 213, 229, 0.08); border: 1px solid rgba(168, 213, 229, 0.15); border-radius: 12px; } .tour-section-icon .cyber-icon { width: 1.5em !important; height: 1.5em !important; } .tour-section-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 700; background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tour-section-desc { color: #94a3b8; font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 800px; } /* ============================================ DASHBOARD CARD ENHANCEMENTS ============================================ */ /* Hub stats crystal treatment */ .hub-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .hub-stat { position: relative; flex: 1; min-width: 140px; padding: 1.25rem 1.5rem; text-align: center; overflow: visible; background: linear-gradient( 165deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100% ); /* Use border-radius instead of clip-path */ border-radius: 10px; /* Visible border */ border: 1px solid rgba(168, 213, 229, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .hub-stat::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.3) 50%, transparent 100% ); border-radius: 10px 10px 0 0; } .hub-stat:hover { transform: translateY(-2px); border-color: rgba(168, 213, 229, 0.2); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 30px rgba(91, 164, 181, 0.06); } .hub-stat-value { font-family: 'Exo 2', sans-serif; font-size: 2rem; font-weight: 800; background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .hub-stat-value.info { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hub-stat-value.success { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hub-stat-value.warning { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hub-stat-value.danger { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hub-stat-label { color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 6px; } /* Hub alerts crystal treatment */ .hub-alert { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; overflow: hidden; background: linear-gradient( 165deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100% ); border-left: 3px solid var(--crystal-primary); border-radius: 0 12px 12px 0; box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3); } .hub-alert.info { border-left-color: var(--crystal-primary); } .hub-alert.success { border-left-color: #10b981; } .hub-alert.warning { border-left-color: #f59e0b; } .hub-alert.danger { border-left-color: #ef4444; } .hub-alert-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(168, 213, 229, 0.08); border-radius: 10px; flex-shrink: 0; } .hub-alert-title { font-family: 'Exo 2', sans-serif; font-weight: 600; color: #f1f5f9; margin-bottom: 4px; } .hub-alert-text { color: #94a3b8; font-size: 0.9rem; line-height: 1.5; } /* Platform/account cards crystal treatment */ .platform-card, .account-card, .gaming-platform-card { position: relative; overflow: visible; padding: 1.5rem; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); background: linear-gradient( 165deg, rgba(15, 23, 41, 0.95) 0%, rgba(10, 14, 22, 0.98) 100% ); /* Use border-radius instead of clip-path */ border-radius: 14px; /* Visible border */ border: 1px solid rgba(168, 213, 229, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } .platform-card::before, .account-card::before, .gaming-platform-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.25) 30%, rgba(197, 232, 242, 0.4) 50%, rgba(168, 213, 229, 0.25) 70%, transparent 100% ); z-index: 2; transition: all 0.4s ease; border-radius: 14px 14px 0 0; } .platform-card:hover, .account-card:hover, .gaming-platform-card:hover { transform: translateY(-3px); border-color: rgba(168, 213, 229, 0.22); box-shadow: 0 0 40px rgba(91, 164, 181, 0.08), 0 15px 35px rgba(0, 0, 0, 0.4); } .platform-card:hover::before, .account-card:hover::before, .gaming-platform-card:hover::before { background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.4) 30%, rgba(232, 246, 250, 0.65) 50%, rgba(168, 213, 229, 0.4) 70%, transparent 100% ); } /* Breach card crystal treatment */ .breach-item, .breach-card { position: relative; overflow: hidden; padding: 1.25rem 1.5rem; margin-bottom: 1rem; transition: all 0.35s ease; background: linear-gradient( 165deg, rgba(15, 23, 41, 0.92) 0%, rgba(10, 14, 22, 0.96) 100% ); border-radius: 12px; border-left: 3px solid rgba(168, 213, 229, 0.3); box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.08), 0 2px 12px rgba(0, 0, 0, 0.25); } .breach-item::before, .breach-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, rgba(168, 213, 229, 0.2) 0%, rgba(197, 232, 242, 0.35) 50%, transparent 100% ); border-radius: 12px 12px 0 0; } .breach-item:hover, .breach-card:hover { transform: translateX(4px); border-left-color: var(--crystal-primary); box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(91, 164, 181, 0.05); } .breach-item.critical, .breach-card.critical { border-left-color: #ef4444; } .breach-item.high, .breach-card.high { border-left-color: #f59e0b; } .breach-item.medium, .breach-card.medium { border-left-color: #3b82f6; } .breach-item.low, .breach-card.low { border-left-color: #10b981; } /* ============================================ PRICING TIER CARD ENHANCEMENTS ============================================ */ .tier-card, .mvp-price-card { position: relative; overflow: visible; padding: 2rem; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); background: linear-gradient( 165deg, rgba(15, 23, 41, 0.96) 0%, rgba(10, 14, 22, 0.99) 100% ); /* Use border-radius instead of clip-path to avoid cutting content */ border-radius: 16px; /* Visible border */ border: 1px solid rgba(168, 213, 229, 0.15); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .tier-card::before, .mvp-price-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.25) 30%, rgba(197, 232, 242, 0.4) 50%, rgba(168, 213, 229, 0.25) 70%, transparent 100% ); z-index: 2; border-radius: 16px 16px 0 0; } /* Remove the corner accent that was using clip-path */ .tier-card::after, .mvp-price-card::after { display: none; } .tier-card:hover, .mvp-price-card:hover { transform: translateY(-5px); border-color: rgba(168, 213, 229, 0.3); box-shadow: 0 0 50px rgba(91, 164, 181, 0.1), 0 25px 50px rgba(0, 0, 0, 0.45); } .tier-card:hover::before, .mvp-price-card:hover::before { background: linear-gradient( 90deg, transparent 0%, rgba(168, 213, 229, 0.4) 30%, rgba(232, 246, 250, 0.6) 50%, rgba(168, 213, 229, 0.4) 70%, transparent 100% ); } /* Featured/Popular tier */ .tier-card.featured, .mvp-price-card.featured { border-color: rgba(168, 213, 229, 0.35); box-shadow: 0 0 60px rgba(91, 164, 181, 0.12), 0 15px 45px rgba(0, 0, 0, 0.45); } .tier-card.featured::before, .mvp-price-card.featured::before { height: 2px; background: var(--crystal-gradient); left: 5%; right: 5%; } .tier-card.featured:hover, .mvp-price-card.featured:hover { border-color: rgba(168, 213, 229, 0.5); box-shadow: 0 0 80px rgba(91, 164, 181, 0.18), 0 30px 60px rgba(0, 0, 0, 0.5); } /* Tier name with crystal gradient */ .tier-name, .mvp-price-card h3 { font-family: 'Exo 2', sans-serif; font-weight: 700; } /* Price styling */ .tier-price, .mvp-price-card .price { font-family: 'Exo 2', sans-serif; font-weight: 800; } .tier-price .amount, .mvp-price-card .price-amount { background: var(--crystal-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Feature list in pricing */ .tier-features li, .mvp-price-card ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; color: #94a3b8; font-size: 0.9rem; } .tier-features li::before, .mvp-price-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--crystal-primary); font-weight: 600; } /* Glow effect on hover */ .crystal-hover-glow:hover { box-shadow: 0 0 30px var(--crystal-glow-soft); } /* Frost glass effect */ .crystal-frost { background: rgba(15, 23, 41, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--frost-border); } /* Crystal shine animation */ .crystal-shine { position: relative; overflow: hidden; } .crystal-shine::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60% ); animation: crystal-shine-sweep 3s infinite; } @keyframes crystal-shine-sweep { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } /* ============================================================================= PLAN CARD COSMIC - Match /pricing page visual style ============================================================================= */ /* Keep faceted clip-path like pricing, handle badge with wrapper */ .plan-card-cosmic { /* Restore clip-path for faceted look */ clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ) !important; position: relative; overflow: visible !important; /* Enhanced shadow for depth */ box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.2); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .plan-card-cosmic:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.2), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(168, 213, 229, 0.08); } /* Tier-specific border glows on hover */ .plan-card-cosmic.crystal-cosmic-stellar:hover { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(168, 213, 229, 0.15); } .plan-card-cosmic.crystal-cosmic-purple:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(167, 139, 250, 0.15); } .plan-card-cosmic.crystal-cosmic-gold:hover { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(251, 191, 36, 0.15); } /* Badge positioning - use wrapper to escape clip-path */ .plan-card-cosmic .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 30; white-space: nowrap; /* Faceted badge shape */ clip-path: polygon( 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px ); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } /* Content padding */ .plan-card-cosmic .cosmic-content { position: relative; overflow: visible; padding: 20px; z-index: 10; } /* Extra top padding for cards with badges */ .plan-card-cosmic.crystal-cosmic-purple .cosmic-content, .plan-card-cosmic.crystal-cosmic-gold .cosmic-content { padding-top: 28px; } /* KEEP cosmic edges and corners - they look great! */ .plan-card-cosmic .cosmic-edge-top, .plan-card-cosmic .cosmic-edge-left, .plan-card-cosmic .cosmic-edge-right, .plan-card-cosmic .cosmic-edge-bottom, .plan-card-cosmic .cosmic-corner { display: block !important; opacity: 0.7; transition: opacity 0.3s ease; } .plan-card-cosmic:hover .cosmic-edge-top, .plan-card-cosmic:hover .cosmic-edge-left, .plan-card-cosmic:hover .cosmic-edge-right, .plan-card-cosmic:hover .cosmic-edge-bottom, .plan-card-cosmic:hover .cosmic-corner { opacity: 1; } /* Keep background effects contained */ .plan-card-cosmic .cosmic-light-source, .plan-card-cosmic .cosmic-mirror, .plan-card-cosmic .cosmic-depth, .plan-card-cosmic .cosmic-stars, .plan-card-cosmic .cosmic-nebula { clip-path: inherit; } /* ============================================================================= PLAN CARD FEATURE HIGHLIGHTS - Better layout for narrow cards ============================================================================= */ .plan-card-cosmic .feature-highlights { font-size: 0.85rem; } .plan-card-cosmic .feature-highlights > div { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0; } .plan-card-cosmic .feature-highlights > div > span:first-child { color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } .plan-card-cosmic .feature-highlights > div > span:last-child { font-weight: 600; } /* Responsive: side-by-side on wider cards */ @media (min-width: 1400px) { .plan-card-cosmic .feature-highlights > div { flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem; } .plan-card-cosmic .feature-highlights > div > span:first-child { font-size: 0.85rem; text-transform: none; letter-spacing: normal; } } /* ============================================================================= COSMIC NAVIGATION ENHANCEMENT ============================================================================= Phase 1: Top Nav Bar (non-authenticated) Phase 2: Sidebar Menu (authenticated) ============================================================================= */ /* ============================================================================= PHASE 1: DESKTOP TOP NAV - COSMIC ENHANCEMENT ============================================================================= */ .desktop-nav-horizontal { position: fixed; top: 12px; left: 12px; z-index: 1000; display: flex; align-items: center; gap: 0; } /* Logo Button with Cosmic Glow */ .desktop-logo-btn { background: transparent; border: none; padding: 0; cursor: pointer; outline: none; z-index: 1001; position: relative; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .desktop-logo-btn::before { content: ''; position: absolute; inset: 20px; background: radial-gradient(circle, rgba(168, 213, 229, 0.3) 0%, transparent 70%); filter: blur(20px); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .desktop-logo-btn:hover::before { opacity: 1; } .desktop-logo-img { height: 200px; width: auto; filter: drop-shadow(0 4px 20px rgba(168, 213, 229, 0.5)) drop-shadow(0 0 35px rgba(34, 211, 238, 0.3)) drop-shadow(0 0 50px rgba(139, 92, 246, 0.2)); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .desktop-logo-btn:hover .desktop-logo-img { filter: drop-shadow(0 4px 25px rgba(168, 213, 229, 0.8)) drop-shadow(0 0 45px rgba(34, 211, 238, 0.6)) drop-shadow(0 0 70px rgba(139, 92, 246, 0.5)); transform: scale(1.02); } /* Menu Bar - Cosmic Faceted Style */ .desktop-menu-bar { display: flex; align-items: center; gap: 4px; background: linear-gradient(135deg, rgba(10, 14, 23, 0.98), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(168, 213, 229, 0.3); border-radius: 0; padding: 10px 20px; margin-left: -45px; padding-left: 55px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 213, 229, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease; white-space: nowrap; clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px); position: relative; } .desktop-menu-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.5), rgba(167, 139, 250, 0.3), transparent); } .desktop-menu-bar.open { max-width: 750px; opacity: 1; padding: 10px 24px 10px 60px; } /* Menu Links - Cosmic Style */ .desktop-menu-link { color: #94a3b8; text-decoration: none; font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 0; transition: all 0.25s ease; white-space: nowrap; position: relative; clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px); } .desktop-menu-link::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, #A8D5E5, #a78bfa); transform: translateX(-50%); transition: width 0.25s ease; border-radius: 1px; } .desktop-menu-link:hover { color: #e2e8f0; background: rgba(168, 213, 229, 0.1); } .desktop-menu-link:hover::after { width: 60%; } /* CTA Button - Cosmic Faceted */ .desktop-menu-cta { background: linear-gradient(135deg, #A8D5E5, #7FC8DC); color: #0a0e17 !important; font-weight: 700; padding: 8px 18px; clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px); box-shadow: 0 0 15px rgba(168, 213, 229, 0.3); transition: all 0.3s ease; } .desktop-menu-cta:hover { background: linear-gradient(135deg, #c4e4ed, #A8D5E5); box-shadow: 0 0 25px rgba(168, 213, 229, 0.5), 0 4px 20px rgba(168, 213, 229, 0.3); transform: translateY(-1px); } .desktop-menu-cta::after { display: none; } @media (max-width: 768px) { .desktop-nav-horizontal { display: none !important; } } /* ============================================================================= PHASE 2: SIDEBAR NAVIGATION - COSMIC ENHANCEMENT ============================================================================= */ /* Sidebar Container - Cosmic styling only, positioning from shared.css */ .sidebar-nav { background: linear-gradient(180deg, rgba(10, 14, 23, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important; border-right: 1px solid rgba(168, 213, 229, 0.15) !important; overflow: visible !important; /* Allow collapse button to show outside sidebar bounds */ transition: width 0.3s ease !important; } /* Ensure menu still scrolls while sidebar overflow is visible */ .sidebar-menu { overflow-y: auto; overflow-x: hidden; } .sidebar-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: radial-gradient(ellipse at 50% 0%, rgba(168, 213, 229, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* Sidebar Header with Logo */ .sidebar-header { padding: 1rem; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(100, 116, 139, 0.2); position: relative; z-index: 1; } .sidebar-logo-icon { height: 100px; width: auto; filter: drop-shadow(0 0 20px rgba(168, 213, 229, 0.4)); transition: all 0.3s ease; } .sidebar-header:hover .sidebar-logo-icon { filter: drop-shadow(0 0 30px rgba(168, 213, 229, 0.6)); } /* Sidebar Menu */ .sidebar-menu { padding: 0.75rem 0; position: relative; z-index: 1; } /* Section Details - Collapsible */ .sidebar-section { margin-bottom: 0.25rem; } .sidebar-section summary { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; cursor: pointer; list-style: none; color: #64748b; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; transition: all 0.2s ease; position: relative; /* Faceted left edge */ background: transparent; clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 0 85%, 4px 70%, 4px 30%, 0 15% ); margin-left: 0; } /* Faceted accent bar */ .sidebar-section summary::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 4px; background: transparent; clip-path: polygon( 0 0, 100% 15%, 100% 85%, 0 100% ); transition: all 0.25s ease; } .sidebar-section summary::-webkit-details-marker { display: none; } .sidebar-section summary:hover { color: #94a3b8; background: rgba(168, 213, 229, 0.03); } .sidebar-section summary:hover::before { background: linear-gradient(180deg, rgba(168, 213, 229, 0.2), rgba(168, 213, 229, 0.4), rgba(168, 213, 229, 0.2) ); } .sidebar-section[open] summary { color: #A8D5E5; } .sidebar-section[open] summary::before { background: linear-gradient(180deg, rgba(168, 213, 229, 0.4), rgba(168, 213, 229, 0.7), rgba(139, 92, 246, 0.5) ); box-shadow: 0 0 8px rgba(168, 213, 229, 0.4); } .sidebar-section .section-toggle { width: 14px; height: 14px; transition: transform 0.3s ease; opacity: 0.5; } .sidebar-section[open] .section-toggle { transform: rotate(180deg); opacity: 1; } /* Section Links Container */ .section-links { padding: 0.25rem 0 0.5rem 0; } /* Sidebar Link - Faceted Cosmic Style */ .sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem 0.65rem 1.25rem; color: #94a3b8; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.25s ease; position: relative; margin: 2px 0.5rem; background: transparent; /* Faceted shape - angled left edge */ clip-path: polygon( 8px 0, 100% 0, 100% 100%, 8px 100%, 0 85%, 0 15% ); } /* Faceted accent indicator */ .sidebar-link::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 4px; background: transparent; clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); transition: all 0.25s ease; } .sidebar-link:hover { color: #e2e8f0; background: rgba(168, 213, 229, 0.06); } .sidebar-link:hover::before { background: linear-gradient(180deg, rgba(168, 213, 229, 0.3), rgba(168, 213, 229, 0.5), rgba(168, 213, 229, 0.3) ); } .sidebar-link.active { color: #A8D5E5; background: linear-gradient(90deg, rgba(168, 213, 229, 0.15), rgba(168, 213, 229, 0.06), rgba(139, 92, 246, 0.02), transparent ); /* Subtle inner glow */ box-shadow: inset 0 0 20px rgba(168, 213, 229, 0.08), inset 0 1px 0 rgba(168, 213, 229, 0.1); } .sidebar-link.active::before { width: 5px; background: linear-gradient(180deg, #60a5fa, #A8D5E5, #22d3ee, #a78bfa, #8b5cf6 ); box-shadow: 0 0 8px rgba(168, 213, 229, 0.7), 0 0 16px rgba(34, 211, 238, 0.4), 0 0 24px rgba(139, 92, 246, 0.3); /* Animated glow pulse */ animation: activeAccentPulse 2s ease-in-out infinite; } /* Glowing accent animation */ @keyframes activeAccentPulse { 0%, 100% { box-shadow: 0 0 8px rgba(168, 213, 229, 0.7), 0 0 16px rgba(34, 211, 238, 0.4), 0 0 24px rgba(139, 92, 246, 0.3); } 50% { box-shadow: 0 0 12px rgba(168, 213, 229, 0.9), 0 0 24px rgba(34, 211, 238, 0.6), 0 0 36px rgba(139, 92, 246, 0.4); } } /* Active link ::after for subtle right-side glow */ .sidebar-link.active::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 40%; background: radial-gradient(ellipse at right, rgba(168, 213, 229, 0.06) 0%, transparent 70%); pointer-events: none; } /* Enhanced icon glow when active */ .sidebar-link.active .sidebar-link-icon svg, .sidebar-link.active .sidebar-link-icon .icon-svg { filter: drop-shadow(0 0 4px rgba(168, 213, 229, 0.5)); } /* Sidebar Link Icon */ .sidebar-link-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-link-icon svg, .sidebar-link-icon .icon-svg { width: 20px; height: 20px; stroke: url(#gw-grad-stellar); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: all 0.25s ease; } .sidebar-link-icon .icon-svg.icon-gold { stroke: url(#gw-grad-jupiter); } .sidebar-link-icon .icon-svg.icon-success { stroke: url(#gw-grad-success); } .sidebar-link-icon .icon-svg.icon-alert { stroke: url(#gw-grad-alert); } .sidebar-link-icon .icon-svg.icon-eclipse { stroke: url(#gw-grad-eclipse); } .sidebar-link:hover .sidebar-link-icon svg, .sidebar-link:hover .sidebar-link-icon .icon-svg { filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.6)); stroke-width: 1.75; } .sidebar-link.active .sidebar-link-icon svg, .sidebar-link.active .sidebar-link-icon .icon-svg { filter: drop-shadow(0 0 10px rgba(168, 213, 229, 0.8)); stroke-width: 2; } /* Sidebar Link Badge */ .sidebar-link-badge { margin-left: auto; padding: 2px 6px; font-size: 0.6rem; font-weight: 700; border-radius: 4px; background: rgba(168, 213, 229, 0.2); color: #A8D5E5; clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px); } /* Featured Links - Faceted Premium Style */ .sidebar-link-featured { background: linear-gradient(90deg, rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.04), transparent); margin: 4px 0.5rem; position: relative; /* Faceted border using box-shadow inset */ box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(167, 139, 250, 0.2), inset 0 -1px 0 rgba(167, 139, 250, 0.15), inset -1px 0 0 rgba(167, 139, 250, 0.1); } .sidebar-link-featured::before { background: linear-gradient(180deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.5), rgba(167, 139, 250, 0.3) ) !important; } .sidebar-link-featured:hover { background: linear-gradient(90deg, rgba(167, 139, 250, 0.18), rgba(139, 92, 246, 0.08), transparent); box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.6), inset 0 1px 0 rgba(167, 139, 250, 0.3), inset 0 -1px 0 rgba(167, 139, 250, 0.2), inset -1px 0 0 rgba(167, 139, 250, 0.15); } .sidebar-link-featured:hover::before { background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(139, 92, 246, 0.7), rgba(167, 139, 250, 0.5) ) !important; box-shadow: 0 0 8px rgba(139, 92, 246, 0.4); } /* Asset Shield - Green accent */ .sidebar-link-featured[href*="asset-shield"] { background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04), transparent) !important; box-shadow: inset 2px 0 0 rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(16, 185, 129, 0.25), inset 0 -1px 0 rgba(16, 185, 129, 0.15), inset -1px 0 0 rgba(16, 185, 129, 0.1) !important; border: none !important; } .sidebar-link-featured[href*="asset-shield"]::before { background: linear-gradient(180deg, rgba(16, 185, 129, 0.4), rgba(34, 197, 94, 0.6), rgba(16, 185, 129, 0.4) ) !important; } .sidebar-link-featured[href*="asset-shield"]:hover { background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.06), transparent) !important; box-shadow: inset 3px 0 0 rgba(16, 185, 129, 0.7), inset 0 1px 0 rgba(16, 185, 129, 0.35), inset 0 -1px 0 rgba(16, 185, 129, 0.2), inset -1px 0 0 rgba(16, 185, 129, 0.15) !important; } .sidebar-link-featured[href*="asset-shield"]:hover::before { background: linear-gradient(180deg, rgba(16, 185, 129, 0.6), rgba(34, 197, 94, 0.8), rgba(16, 185, 129, 0.6) ) !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); } /* Asset Shield - ACTIVE state */ .sidebar-link-featured[href*="asset-shield"].active { background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(34, 197, 94, 0.08), rgba(168, 213, 229, 0.02), transparent ) !important; box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(16, 185, 129, 0.15), inset 0 -1px 0 rgba(16, 185, 129, 0.1) !important; } .sidebar-link-featured[href*="asset-shield"].active::before { width: 5px; background: linear-gradient(180deg, #60a5fa, #10b981, #22c55e, #22d3ee, #a78bfa ) !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.7), 0 0 16px rgba(34, 197, 94, 0.5), 0 0 24px rgba(168, 213, 229, 0.3) !important; animation: activeAccentPulse 2s ease-in-out infinite; } /* DoxxScan - Red/Orange accent */ .sidebar-link-featured[href*="doxxscan"] { background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(249, 115, 22, 0.06), transparent) !important; box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(239, 68, 68, 0.25), inset 0 -1px 0 rgba(239, 68, 68, 0.15), inset -1px 0 0 rgba(239, 68, 68, 0.1) !important; border: none !important; } .sidebar-link-featured[href*="doxxscan"]::before { background: linear-gradient(180deg, rgba(249, 115, 22, 0.5), rgba(239, 68, 68, 0.7), rgba(249, 115, 22, 0.5) ) !important; } .sidebar-link-featured[href*="doxxscan"]:hover { background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(249, 115, 22, 0.08), transparent) !important; box-shadow: inset 3px 0 0 rgba(239, 68, 68, 0.7), inset 0 1px 0 rgba(239, 68, 68, 0.35), inset 0 -1px 0 rgba(239, 68, 68, 0.2), inset -1px 0 0 rgba(239, 68, 68, 0.15) !important; } .sidebar-link-featured[href*="doxxscan"]:hover::before { background: linear-gradient(180deg, rgba(249, 115, 22, 0.6), rgba(239, 68, 68, 0.85), rgba(249, 115, 22, 0.6) ) !important; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); } /* DoxxScan - ACTIVE state */ .sidebar-link-featured[href*="doxxscan"].active { background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(249, 115, 22, 0.08), rgba(168, 213, 229, 0.02), transparent ) !important; box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(239, 68, 68, 0.15), inset 0 -1px 0 rgba(239, 68, 68, 0.1) !important; } .sidebar-link-featured[href*="doxxscan"].active::before { width: 5px; background: linear-gradient(180deg, #f97316, #ef4444, #ec4899, #a78bfa, #22d3ee ) !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.7), 0 0 16px rgba(249, 115, 22, 0.5), 0 0 24px rgba(236, 72, 153, 0.3) !important; animation: activeAccentPulse 2s ease-in-out infinite; } /* Sidebar Footer - User Info */ .sidebar-footer { margin-top: auto; padding: 1rem; border-top: 1px solid rgba(100, 116, 139, 0.2); background: rgba(0, 0, 0, 0.2); position: relative; z-index: 1; } .sidebar-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 10px; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(100, 116, 139, 0.2); clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px); } .sidebar-avatar { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, rgba(168, 213, 229, 0.2), rgba(167, 139, 250, 0.2)); border: 1px solid rgba(168, 213, 229, 0.3); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #A8D5E5; font-size: 0.9rem; clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px); } .sidebar-avatar.pro-avatar { background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(167, 139, 250, 0.2)); border-color: rgba(96, 165, 250, 0.4); color: #60a5fa; } .sidebar-avatar.elite-avatar { background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2)); border-color: rgba(251, 191, 36, 0.5); color: #fbbf24; box-shadow: 0 0 15px rgba(251, 191, 36, 0.2); } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-tier { font-size: 0.7rem; color: #64748b; display: flex; align-items: center; gap: 4px; } .sidebar-user-tier.tier-pro { color: #60a5fa; } .sidebar-user-tier.tier-elite { color: #fbbf24; } /* XP Progress in Sidebar */ .sidebar-xp { margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: rgba(30, 41, 59, 0.5); border-radius: 8px; border: 1px solid rgba(100, 116, 139, 0.15); } /* Collapse Button - Clean edge design */ .sidebar-collapse-btn { position: absolute !important; top: 50% !important; right: -14px !important; transform: translateY(-50%) !important; width: 28px !important; height: 56px !important; background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.95)) !important; border: 1px solid rgba(168, 213, 229, 0.25) !important; border-left: none !important; border-radius: 0 12px 12px 0 !important; color: #A8D5E5 !important; font-size: 1rem !important; cursor: pointer; transition: all 0.3s ease, transform 0.3s ease; display: flex !important; align-items: center; justify-content: center; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(168, 213, 229, 0.05); z-index: 1001; } .sidebar-collapse-btn:hover { background: linear-gradient(135deg, rgba(168, 213, 229, 0.15), rgba(167, 139, 250, 0.1)) !important; color: #e2e8f0 !important; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(168, 213, 229, 0.15); } /* Desktop only - show collapse button */ @media (min-width: 1024px) { .sidebar-collapse-btn { display: flex !important; } } /* Tablet/mobile - hide collapse button */ @media (max-width: 1023px) { .sidebar-collapse-btn { display: none !important; } } /* ============================================================================= MOBILE BOTTOM NAV - COSMIC ENHANCEMENT ============================================================================= */ @media (max-width: 768px) { .mobile-bottom-nav { background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 14, 23, 0.99) 100%) !important; border-top: 1px solid rgba(168, 213, 229, 0.2) !important; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5), 0 -2px 20px rgba(168, 213, 229, 0.05) !important; } .mobile-bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.4), rgba(167, 139, 250, 0.3), transparent); } .mobile-nav-item { position: relative; padding: 0.5rem 0.75rem; border-radius: 0; transition: all 0.25s ease; clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px); } .mobile-nav-item.active { background: linear-gradient(180deg, rgba(168, 213, 229, 0.15), transparent); } .mobile-nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 2px; background: linear-gradient(90deg, transparent, #A8D5E5, transparent); border-radius: 0 0 2px 2px; } .mobile-nav-icon { background: rgba(30, 41, 59, 0.5); border-radius: 8px; padding: 6px; transition: all 0.25s ease; } .mobile-nav-item.active .mobile-nav-icon { background: linear-gradient(135deg, rgba(168, 213, 229, 0.2), rgba(167, 139, 250, 0.1)); box-shadow: 0 0 15px rgba(168, 213, 229, 0.2); } .mobile-nav-badge { background: linear-gradient(135deg, #ef4444, #dc2626) !important; clip-path: polygon(2px 0%, calc(100% - 2px) 0%, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0% calc(100% - 2px), 0% 2px); box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); } } /* ============================================================================= SIDEBAR MOBILE DRAWER ENHANCEMENT ============================================================================= */ @media (max-width: 768px) { .sidebar-nav { background: linear-gradient(180deg, rgba(10, 14, 23, 0.99) 0%, rgba(15, 23, 42, 0.98) 100%) !important; box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 213, 229, 0.05); } .sidebar-nav.mobile-open { box-shadow: 4px 0 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(168, 213, 229, 0.1); } .sidebar-close-mobile { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px); border-radius: 0 !important; } .sidebar-close-mobile:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.2)) !important; box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } .mobile-sidebar-overlay.active { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } } /* ============================================================================= COLLAPSED SIDEBAR STATE - Desktop icon-only mode ============================================================================= */ @media (min-width: 769px) { /* Collapsed sidebar width */ .sidebar-nav.collapsed { width: 72px !important; } /* Body padding adjustment */ body.has-sidebar.sidebar-collapsed { padding-left: 72px !important; } /* Header - hide logo text, shrink logo */ .sidebar-nav.collapsed .sidebar-header { padding: 12px 8px; justify-content: center; } .sidebar-nav.collapsed .sidebar-logo-icon { height: 48px; margin: 0; } .sidebar-nav.collapsed .sidebar-brand { display: none; } /* Collapse button rotation */ .sidebar-nav.collapsed .sidebar-collapse-btn { transform: translateY(-50%) rotate(180deg) !important; } /* Section headers - hide */ .sidebar-nav.collapsed .sidebar-section-title, .sidebar-nav.collapsed .sidebar-section-collapse summary .section-title { opacity: 0; width: 0; overflow: hidden; } .sidebar-nav.collapsed .sidebar-section-collapse summary .section-toggle { display: none; } .sidebar-nav.collapsed .sidebar-section-collapse summary { justify-content: center; padding: 8px; } /* Links - center icons, hide text */ .sidebar-nav.collapsed .sidebar-link { justify-content: center; padding: 12px 8px; } .sidebar-nav.collapsed .sidebar-link-text { opacity: 0; width: 0; overflow: hidden; position: absolute; } .sidebar-nav.collapsed .sidebar-link-icon { margin: 0; } /* Badge repositioning */ .sidebar-nav.collapsed .sidebar-link-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; } /* Tooltip on hover */ .sidebar-nav.collapsed .sidebar-link { position: relative; } .sidebar-nav.collapsed .sidebar-link::after { content: attr(data-title); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95)); border: 1px solid rgba(168, 213, 229, 0.3); padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; color: #e2e8f0; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.15s ease; z-index: 1100; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(168, 213, 229, 0.1); } .sidebar-nav.collapsed .sidebar-link:hover::after { opacity: 1; visibility: visible; } /* Footer - compact */ .sidebar-nav.collapsed .sidebar-footer { padding: 12px 8px; } .sidebar-nav.collapsed .sidebar-user { justify-content: center; } .sidebar-nav.collapsed .sidebar-user-info { display: none; } .sidebar-nav.collapsed .sidebar-avatar { margin: 0; } .sidebar-nav.collapsed .sidebar-xp { display: none; } /* Featured links - adjust for collapsed */ .sidebar-nav.collapsed .sidebar-link-featured { padding: 12px 8px; } .sidebar-nav.collapsed .sidebar-link-featured::before { width: 3px; } } /* ═══════════════════════════════════════════════════════════════════════════════ SIDEBAR COSMIC CARD REDESIGN Premium rounded card-style navigation with mouse-reactive lighting ═══════════════════════════════════════════════════════════════════════════════ */ /* ============================================================================= SIDEBAR LINK - COSMIC CARD STYLE (Replaces faceted) ============================================================================= */ .sidebar-link { --mouse-x: 50%; --mouse-y: 50%; --light-intensity: 0; --link-color: rgba(168, 213, 229, 1); --link-glow: rgba(168, 213, 229, 0.5); --link-bg: rgba(168, 213, 229, 0.06); display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem 0.7rem 1rem; color: #94a3b8; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); position: relative; margin: 3px 0.5rem; background: transparent; border-radius: 10px; overflow: hidden; /* Remove faceted clip-path for rounded */ clip-path: none !important; } /* Mouse-reactive light layer */ .sidebar-link::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle 150px at var(--mouse-x) var(--mouse-y), var(--link-bg) 0%, transparent 70% ); opacity: var(--light-intensity); pointer-events: none; transition: opacity 0.3s ease; border-radius: inherit; } /* Top shimmer layer */ .sidebar-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%); pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease; } .sidebar-link:hover { color: #e2e8f0; background: var(--link-bg); transform: translateX(3px); box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.15), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .sidebar-link:hover::after { opacity: 1; } .sidebar-link.active { color: var(--link-color); background: linear-gradient(135deg, var(--link-bg), rgba(0, 0, 0, 0.2) ); box-shadow: 0 0 0 1px color-mix(in srgb, var(--link-color) 25%, transparent), 0 0 20px color-mix(in srgb, var(--link-glow) 15%, transparent), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); transform: translateX(3px); } .sidebar-link.active::after { opacity: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, color-mix(in srgb, var(--link-glow) 5%, transparent) 100% ); } /* ============================================================================= FEATURED LINKS - ASSET SHIELD (Emerald) ============================================================================= */ .sidebar-link-featured[href*="asset-shield"], .sidebar-link[href*="asset-shield"] { --link-color: #10b981; --link-glow: rgba(16, 185, 129, 0.6); --link-bg: rgba(16, 185, 129, 0.08); background: linear-gradient(90deg, rgba(16, 185, 129, 0.06), transparent) !important; border: none !important; box-shadow: none !important; } .sidebar-link-featured[href*="asset-shield"]::before, .sidebar-link[href*="asset-shield"]::before { background: radial-gradient( circle 150px at var(--mouse-x) var(--mouse-y), rgba(16, 185, 129, 0.15) 0%, transparent 70% ) !important; } .sidebar-link-featured[href*="asset-shield"]:hover, .sidebar-link[href*="asset-shield"]:hover { background: rgba(16, 185, 129, 0.1) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 0 25px rgba(16, 185, 129, 0.15), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(16, 185, 129, 0.1) !important; } .sidebar-link-featured[href*="asset-shield"].active, .sidebar-link[href*="asset-shield"].active { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(0, 0, 0, 0.2)) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3), 0 0 30px rgba(16, 185, 129, 0.2), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(16, 185, 129, 0.15) !important; } /* ============================================================================= FEATURED LINKS - DOXXSCAN (Crimson/Orange) ============================================================================= */ .sidebar-link-featured[href*="doxxscan"], .sidebar-link[href*="doxxscan"] { --link-color: #ef4444; --link-glow: rgba(239, 68, 68, 0.6); --link-bg: rgba(239, 68, 68, 0.08); background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent) !important; border: none !important; box-shadow: none !important; } .sidebar-link-featured[href*="doxxscan"]::before, .sidebar-link[href*="doxxscan"]::before { background: radial-gradient( circle 150px at var(--mouse-x) var(--mouse-y), rgba(239, 68, 68, 0.15) 0%, rgba(249, 115, 22, 0.08) 50%, transparent 70% ) !important; } .sidebar-link-featured[href*="doxxscan"]:hover, .sidebar-link[href*="doxxscan"]:hover { background: rgba(239, 68, 68, 0.1) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 0 25px rgba(239, 68, 68, 0.15), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(239, 68, 68, 0.1) !important; } .sidebar-link-featured[href*="doxxscan"].active, .sidebar-link[href*="doxxscan"].active { background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(0, 0, 0, 0.2)) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 0 30px rgba(239, 68, 68, 0.2), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(239, 68, 68, 0.15) !important; } /* ============================================================================= GAMING HUB (Cyan/Purple Cosmic) ============================================================================= */ .sidebar-link[href*="gaming"] { --link-color: #22d3ee; --link-glow: rgba(34, 211, 238, 0.6); --link-bg: rgba(34, 211, 238, 0.08); } .sidebar-link[href*="gaming"]::before { background: radial-gradient( circle 150px at var(--mouse-x) var(--mouse-y), rgba(34, 211, 238, 0.12) 0%, rgba(139, 92, 246, 0.06) 50%, transparent 70% ) !important; } .sidebar-link[href*="gaming"]:hover { background: rgba(34, 211, 238, 0.08) !important; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 0 25px rgba(34, 211, 238, 0.12), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(34, 211, 238, 0.08) !important; } .sidebar-link[href*="gaming"].active { background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.05), rgba(0, 0, 0, 0.2)) !important; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 30px rgba(34, 211, 238, 0.15), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(34, 211, 238, 0.1) !important; } /* ============================================================================= MISSIONS (Purple/Magenta) ============================================================================= */ .sidebar-link[href*="missions"] { --link-color: #a78bfa; --link-glow: rgba(167, 139, 250, 0.6); --link-bg: rgba(167, 139, 250, 0.08); } .sidebar-link[href*="missions"]::before { background: radial-gradient( circle 150px at var(--mouse-x) var(--mouse-y), rgba(167, 139, 250, 0.12) 0%, rgba(236, 72, 153, 0.06) 50%, transparent 70% ) !important; } .sidebar-link[href*="missions"]:hover { background: rgba(167, 139, 250, 0.08) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 0 25px rgba(167, 139, 250, 0.12), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(167, 139, 250, 0.08) !important; } .sidebar-link[href*="missions"].active { background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(236, 72, 153, 0.05), rgba(0, 0, 0, 0.2)) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3), 0 0 30px rgba(167, 139, 250, 0.15), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(167, 139, 250, 0.12) !important; } /* ============================================================================= UPGRADE LINK - HOLOGRAPHIC FOIL PREMIUM EFFECT ============================================================================= */ .sidebar-link[href*="upgrade"], .sidebar-link[href*="account/upgrade"] { --link-color: #fbbf24; --link-glow: rgba(251, 191, 36, 0.6); position: relative; background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(34, 211, 238, 0.05), rgba(167, 139, 250, 0.05), rgba(251, 191, 36, 0.08) ) !important; overflow: hidden; } /* Holographic shimmer layer */ .sidebar-link[href*="upgrade"]::before, .sidebar-link[href*="account/upgrade"]::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 105deg, transparent 20%, rgba(16, 185, 129, 0.15) 25%, rgba(34, 211, 238, 0.2) 30%, rgba(167, 139, 250, 0.2) 35%, rgba(236, 72, 153, 0.15) 40%, rgba(251, 191, 36, 0.2) 45%, transparent 50% ) !important; background-size: 300% 100% !important; animation: holoShimmer 4s ease-in-out infinite !important; opacity: 0.7 !important; border-radius: inherit !important; } @keyframes holoShimmer { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } } /* Holographic border effect */ .sidebar-link[href*="upgrade"]::after, .sidebar-link[href*="account/upgrade"]::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1px !important; background: linear-gradient( 90deg, rgba(16, 185, 129, 0.4), rgba(34, 211, 238, 0.4), rgba(167, 139, 250, 0.4), rgba(251, 191, 36, 0.4), rgba(16, 185, 129, 0.4) ) !important; background-size: 300% 100% !important; animation: holoBorder 3s linear infinite !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; } @keyframes holoBorder { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } } .sidebar-link[href*="upgrade"]:hover, .sidebar-link[href*="account/upgrade"]:hover { transform: translateX(3px) scale(1.02) !important; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 0 30px rgba(16, 185, 129, 0.15), 0 0 30px rgba(167, 139, 250, 0.15), 0 0 30px rgba(251, 191, 36, 0.15), 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .sidebar-link[href*="upgrade"]:hover::before, .sidebar-link[href*="account/upgrade"]:hover::before { opacity: 1 !important; animation-duration: 2s !important; } .sidebar-link[href*="upgrade"].active, .sidebar-link[href*="account/upgrade"].active { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.08), rgba(251, 191, 36, 0.12) ) !important; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 40px rgba(16, 185, 129, 0.2), 0 0 40px rgba(167, 139, 250, 0.2), 0 0 40px rgba(251, 191, 36, 0.2), 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } /* ============================================================================= SIDEBAR LINK BADGES - Enhanced ============================================================================= */ .sidebar-link-badge { margin-left: auto; padding: 3px 8px; font-size: 0.6rem; font-weight: 700; border-radius: 6px; background: rgba(168, 213, 229, 0.2); color: #A8D5E5; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .sidebar-link:hover .sidebar-link-badge { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ============================================================================= COMMAND CENTER WIDGET - COSMIC CARD CONTAINER Note: Uses specific classes to avoid breaking the cc-btn/cc-panel widget ============================================================================= */ .sv-console, .command-center-unified, .command-center-master { --mouse-x: 50%; --mouse-y: 50%; --light-intensity: 0; position: relative; background: linear-gradient(160deg, rgba(12, 18, 28, 0.98), rgba(8, 12, 22, 0.99)) !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.12), 0 8px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(168, 213, 229, 0.1); } /* Mouse-reactive light */ .sv-console::before, .command-center-unified::before, .command-center-master::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle 400px at var(--mouse-x) var(--mouse-y), rgba(168, 213, 229, calc(0.06 * var(--light-intensity))) 0%, rgba(139, 92, 246, calc(0.03 * var(--light-intensity))) 30%, transparent 60% ); pointer-events: none; z-index: 1; border-radius: inherit; } /* Widget hover state */ .sv-console:hover, .command-center-unified:hover, .command-center-master:hover { box-shadow: 0 0 0 1px rgba(168, 213, 229, 0.2), 0 0 40px rgba(168, 213, 229, 0.1), 0 12px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(168, 213, 229, 0.15); } /* ============================================================================= RESPONSIVE ============================================================================= */ @media (max-width: 768px) { .sidebar-link { border-radius: 8px; padding: 0.6rem 0.875rem; margin: 2px 0.375rem; } .sidebar-link:hover, .sidebar-link.active { transform: translateX(2px); } .command-center-toggle, .sv-toggle-btn, .dashboard-widget-toggle { border-radius: 10px !important; padding: 0.6rem !important; } .sv-console, .command-center-unified, .command-center-master { border-radius: 12px !important; } } /* ============================================================================= MOUSE TRACKING JAVASCRIPT INTEGRATION Sidebar links respond to mouse position for light effects ============================================================================= */ /* This CSS works with the existing cosmic-effects.js mouse tracking */ /* ======================================== COSMIC PAGE ENHANCEMENT Unified styling for Asset Shield, Gaming Hub, Demo Pages ======================================== */ /* ======================================== BACKGROUND EFFECTS ======================================== */ /* Cosmic orbs - floating gradient spheres */ .cosmic-orb-container { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .cosmic-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: cosmicFloat 20s ease-in-out infinite; } .cosmic-orb-cyan { width: 400px; height: 400px; background: radial-gradient(circle, rgba(168, 213, 229, 0.4) 0%, transparent 70%); top: 10%; right: 10%; animation-delay: 0s; } .cosmic-orb-purple { width: 350px; height: 350px; background: radial-gradient(circle, rgba(167, 139, 250, 0.35) 0%, transparent 70%); bottom: 20%; left: 5%; animation-delay: -7s; } .cosmic-orb-gold { width: 300px; height: 300px; background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%); top: 50%; left: 40%; animation-delay: -14s; } @keyframes cosmicFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.05); } 50% { transform: translate(-20px, 30px) scale(0.95); } 75% { transform: translate(20px, 20px) scale(1.02); } } /* Grid overlay */ .cosmic-grid-overlay { position: fixed; inset: 0; background: linear-gradient(rgba(168, 213, 229, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 213, 229, 0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: -1; } /* ======================================== COSMIC CARDS - FACETED STYLE ======================================== */ .cosmic-card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); border: 1px solid rgba(168, 213, 229, 0.2); clip-path: polygon( 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px ); padding: 1.5rem; position: relative; transition: all 0.3s ease; } .cosmic-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple, #a78bfa)); opacity: 0.8; } .cosmic-card:hover { border-color: rgba(168, 213, 229, 0.4); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 213, 229, 0.1); transform: translateY(-2px); } /* Card variants */ .cosmic-card-green { border-color: rgba(16, 185, 129, 0.3); } .cosmic-card-green::before { background: linear-gradient(90deg, #10b981, #34d399); } .cosmic-card-red { border-color: rgba(239, 68, 68, 0.3); } .cosmic-card-red::before { background: linear-gradient(90deg, #ef4444, #f87171); } .cosmic-card-gold { border-color: rgba(251, 191, 36, 0.3); } .cosmic-card-gold::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); } .cosmic-card-purple { border-color: rgba(167, 139, 250, 0.3); } .cosmic-card-purple::before { background: linear-gradient(90deg, #a78bfa, #8b5cf6); } /* ======================================== COSMIC BUTTONS - FACETED ======================================== */ .btn-cosmic { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; position: relative; clip-path: polygon( 8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px ); } .btn-cosmic-primary { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark, #7FC8DC)); color: #0a0e17; box-shadow: 0 4px 20px rgba(168, 213, 229, 0.3); } .btn-cosmic-primary:hover { box-shadow: 0 6px 30px rgba(168, 213, 229, 0.5); transform: translateY(-2px); } .btn-cosmic-green { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); } .btn-cosmic-green:hover { box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5); transform: translateY(-2px); } .btn-cosmic-purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3); } .btn-cosmic-purple:hover { box-shadow: 0 6px 30px rgba(167, 139, 250, 0.5); transform: translateY(-2px); } .btn-cosmic-outline { background: transparent; border: 1px solid rgba(168, 213, 229, 0.4); color: #A8D5E5; } .btn-cosmic-outline:hover { background: rgba(168, 213, 229, 0.1); border-color: rgba(168, 213, 229, 0.6); } /* Large button variant */ .btn-cosmic-lg { padding: 1rem 2rem; font-size: 1rem; clip-path: polygon( 10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px ); } /* ======================================== COSMIC BADGES - FACETED HEXAGONAL ======================================== */ .badge-cosmic { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; clip-path: polygon( 6px 0%, calc(100% - 6px) 0%, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0% 50% ); } .badge-cosmic-cyan { background: linear-gradient(135deg, rgba(168, 213, 229, 0.2), rgba(168, 213, 229, 0.1)); color: #A8D5E5; border: 1px solid rgba(168, 213, 229, 0.3); } .badge-cosmic-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .badge-cosmic-red { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1)); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } .badge-cosmic-gold { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1)); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .badge-cosmic-purple { background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.1)); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.3); } /* ======================================== PAGE HEADERS - COSMIC STYLE ======================================== */ .page-header-cosmic { text-align: center; margin-bottom: 3rem; position: relative; } .page-header-cosmic::after { content: ''; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 150px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); } .page-title-cosmic { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #A8D5E5 0%, #a78bfa 50%, #fbbf24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; text-shadow: none; } .page-subtitle-cosmic { color: #94a3b8; font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* Icon box in header */ .page-icon-cosmic { width: 80px; height: 80px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(168, 213, 229, 0.15), rgba(167, 139, 250, 0.1)); border: 2px solid rgba(168, 213, 229, 0.3); border-radius: 20px; position: relative; } .page-icon-cosmic::before { content: ''; position: absolute; inset: -4px; border-radius: 24px; background: linear-gradient(135deg, rgba(168, 213, 229, 0.2), transparent); z-index: -1; animation: iconPulse 3s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .page-icon-cosmic svg { width: 40px; height: 40px; } /* ======================================== STAT CARDS - COSMIC STYLE ======================================== */ .stats-grid-cosmic { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card-cosmic { background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8)); border: 1px solid rgba(100, 116, 139, 0.2); padding: 1.25rem; text-align: center; position: relative; overflow: hidden; clip-path: polygon( 8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px ); } .stat-card-cosmic::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--stat-color, linear-gradient(90deg, var(--accent-cyan), var(--accent-purple, #a78bfa))); } .stat-value-cosmic { font-size: 2rem; font-weight: 800; color: var(--stat-color, #A8D5E5); text-shadow: 0 0 20px var(--stat-glow, rgba(168, 213, 229, 0.3)); margin-bottom: 0.25rem; } .stat-label-cosmic { color: #64748b; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } /* Stat color variants */ .stat-card-cosmic.success { --stat-color: #10b981; --stat-glow: rgba(16, 185, 129, 0.3); } .stat-card-cosmic.warning { --stat-color: #fbbf24; --stat-glow: rgba(251, 191, 36, 0.3); } .stat-card-cosmic.danger { --stat-color: #ef4444; --stat-glow: rgba(239, 68, 68, 0.3); } .stat-card-cosmic.info { --stat-color: #60a5fa; --stat-glow: rgba(96, 165, 250, 0.3); } /* ======================================== ALERT BANNERS - COSMIC STYLE ======================================== */ .alert-cosmic { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); border: 1px solid rgba(100, 116, 139, 0.3); position: relative; overflow: hidden; clip-path: polygon( 10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px ); } .alert-cosmic::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--alert-color, var(--accent-cyan)); } .alert-icon-cosmic { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--alert-bg, rgba(168, 213, 229, 0.1)); border: 1px solid var(--alert-border, rgba(168, 213, 229, 0.2)); border-radius: 12px; } .alert-icon-cosmic svg { width: 24px; height: 24px; stroke: var(--alert-color, #A8D5E5); } .alert-content-cosmic { flex: 1; } .alert-title-cosmic { font-weight: 700; color: #e2e8f0; margin-bottom: 0.25rem; } .alert-text-cosmic { color: #94a3b8; font-size: 0.9rem; } .alert-action-cosmic { flex-shrink: 0; } /* Alert variants */ .alert-cosmic.success { --alert-color: #10b981; --alert-bg: rgba(16, 185, 129, 0.1); --alert-border: rgba(16, 185, 129, 0.2); } .alert-cosmic.warning { --alert-color: #fbbf24; --alert-bg: rgba(251, 191, 36, 0.1); --alert-border: rgba(251, 191, 36, 0.2); } .alert-cosmic.danger { --alert-color: #ef4444; --alert-bg: rgba(239, 68, 68, 0.1); --alert-border: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.3); } /* ======================================== SECTION HEADERS - COSMIC ======================================== */ .section-header-cosmic { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .section-title-cosmic { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; display: flex; align-items: center; gap: 0.75rem; } .section-title-cosmic svg { width: 1.5rem; height: 1.5rem; } .section-action-cosmic { color: #60a5fa; text-decoration: none; font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 0.25rem; transition: all 0.2s ease; } .section-action-cosmic:hover { color: #A8D5E5; transform: translateX(4px); } /* ======================================== PLATFORM CARDS - COSMIC GAMING HUB ======================================== */ .platform-card-cosmic { display: block; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); border: 1px solid rgba(100, 116, 139, 0.25); padding: 1.5rem; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; clip-path: polygon( 10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px ); } .platform-card-cosmic::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--platform-color, linear-gradient(90deg, var(--accent-cyan), var(--accent-purple, #a78bfa))); opacity: 0.8; } .platform-card-cosmic::after { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: radial-gradient(circle at top right, var(--platform-glow, rgba(168, 213, 229, 0.1)) 0%, transparent 70%); pointer-events: none; } .platform-card-cosmic:hover { border-color: var(--platform-border, rgba(168, 213, 229, 0.4)); transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--platform-glow, rgba(168, 213, 229, 0.1)); } .platform-header-cosmic { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .platform-icon-cosmic { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--platform-bg, rgba(168, 213, 229, 0.1)); border: 2px solid var(--platform-border, rgba(168, 213, 229, 0.2)); border-radius: 14px; } .platform-icon-cosmic img, .platform-icon-cosmic svg { width: 32px; height: 32px; object-fit: contain; } .platform-name-cosmic { font-size: 1.15rem; font-weight: 700; color: #e2e8f0; } .platform-status-cosmic { font-size: 0.8rem; color: #64748b; display: flex; align-items: center; gap: 0.5rem; } .platform-status-cosmic .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color, #10b981); box-shadow: 0 0 8px var(--status-color, #10b981); } /* Platform color variants */ .platform-card-cosmic.steam { --platform-color: linear-gradient(90deg, #1b2838, #66c0f4); --platform-glow: rgba(102, 192, 244, 0.15); --platform-bg: rgba(27, 40, 56, 0.5); --platform-border: rgba(102, 192, 244, 0.3); } .platform-card-cosmic.discord { --platform-color: linear-gradient(90deg, #5865f2, #7289da); --platform-glow: rgba(88, 101, 242, 0.15); --platform-bg: rgba(88, 101, 242, 0.1); --platform-border: rgba(88, 101, 242, 0.3); } .platform-card-cosmic.battlenet { --platform-color: linear-gradient(90deg, #0074e0, #00aeff); --platform-glow: rgba(0, 116, 224, 0.15); --platform-bg: rgba(0, 116, 224, 0.1); --platform-border: rgba(0, 116, 224, 0.3); } .platform-card-cosmic.riot { --platform-color: linear-gradient(90deg, #eb0029, #ff4444); --platform-glow: rgba(235, 0, 41, 0.15); --platform-bg: rgba(235, 0, 41, 0.1); --platform-border: rgba(235, 0, 41, 0.3); } .platform-card-cosmic.protected { --platform-color: linear-gradient(90deg, #10b981, #34d399); --platform-glow: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); } /* ======================================== DEMO PAGE ENHANCEMENTS ======================================== */ .demo-card-cosmic { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); border: 1px solid rgba(168, 213, 229, 0.2); padding: 2rem; position: relative; overflow: hidden; transition: all 0.3s ease; clip-path: polygon( 14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px ); } .demo-card-cosmic::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple, #a78bfa), #fbbf24); } .demo-card-cosmic::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(168, 213, 229, 0.05) 0%, transparent 50%); pointer-events: none; } .demo-card-cosmic:hover { border-color: rgba(168, 213, 229, 0.4); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 40px rgba(168, 213, 229, 0.1); } .demo-icon-cosmic { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(168, 213, 229, 0.15), rgba(167, 139, 250, 0.1)); border: 2px solid rgba(168, 213, 229, 0.25); border-radius: 16px; margin-bottom: 1.5rem; position: relative; } .demo-icon-cosmic svg { width: 32px; height: 32px; } .demo-title-cosmic { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; margin-bottom: 0.75rem; } .demo-desc-cosmic { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; } .demo-features-cosmic { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .demo-feature-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: rgba(100, 116, 139, 0.2); border: 1px solid rgba(100, 116, 139, 0.3); font-size: 0.75rem; color: #94a3b8; clip-path: polygon( 4px 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0% 50% ); } /* ======================================== ASSET SHIELD ENHANCEMENTS ======================================== */ .asset-score-cosmic { width: 140px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)); border: 3px solid var(--score-color, rgba(168, 213, 229, 0.4)); border-radius: 50%; position: relative; box-shadow: 0 0 30px var(--score-glow, rgba(168, 213, 229, 0.2)), inset 0 0 30px rgba(0, 0, 0, 0.3); } .asset-score-cosmic::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--score-color, rgba(168, 213, 229, 0.2)); opacity: 0.5; animation: scoreRing 3s ease-in-out infinite; } @keyframes scoreRing { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; } } .asset-score-value { font-size: 3rem; font-weight: 800; color: var(--score-color, #A8D5E5); text-shadow: 0 0 20px var(--score-glow, rgba(168, 213, 229, 0.4)); line-height: 1; } .asset-score-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.25rem; } /* Score color variants */ .asset-score-cosmic.secure { --score-color: #10b981; --score-glow: rgba(16, 185, 129, 0.3); } .asset-score-cosmic.good { --score-color: #34d399; --score-glow: rgba(52, 211, 153, 0.3); } .asset-score-cosmic.warning { --score-color: #fbbf24; --score-glow: rgba(251, 191, 36, 0.3); } .asset-score-cosmic.danger { --score-color: #f87171; --score-glow: rgba(248, 113, 113, 0.3); } .asset-score-cosmic.critical { --score-color: #ef4444; --score-glow: rgba(239, 68, 68, 0.3); } /* ======================================== FORMS - COSMIC STYLE ======================================== */ .input-cosmic { width: 100%; padding: 0.875rem 1rem; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(100, 116, 139, 0.3); color: #e2e8f0; font-size: 1rem; transition: all 0.2s ease; clip-path: polygon( 6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px ); } .input-cosmic:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 20px rgba(168, 213, 229, 0.15); } .input-cosmic::placeholder { color: #64748b; } /* Input with icon */ .input-wrapper-cosmic { position: relative; } .input-wrapper-cosmic .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; } .input-wrapper-cosmic .input-cosmic { padding-left: 3rem; } /* ======================================== LOADING STATES - COSMIC ======================================== */ .loading-cosmic { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; } .loading-spinner-cosmic { width: 60px; height: 60px; position: relative; } .loading-spinner-cosmic::before, .loading-spinner-cosmic::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; } .loading-spinner-cosmic::before { border-top-color: var(--accent-cyan); border-right-color: var(--accent-cyan); animation: spinnerRotate 1.2s linear infinite; } .loading-spinner-cosmic::after { border-bottom-color: var(--accent-purple, #a78bfa); border-left-color: var(--accent-purple, #a78bfa); animation: spinnerRotate 1.2s linear infinite reverse; animation-delay: 0.4s; } @keyframes spinnerRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-text-cosmic { margin-top: 1.5rem; color: #94a3b8; font-size: 0.9rem; animation: loadingFade 2s ease-in-out infinite; } @keyframes loadingFade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ======================================== RESPONSIVE ADJUSTMENTS ======================================== */ @media (max-width: 768px) { .page-title-cosmic { font-size: 1.75rem; } .page-icon-cosmic { width: 60px; height: 60px; } .page-icon-cosmic svg { width: 30px; height: 30px; } .stats-grid-cosmic { grid-template-columns: repeat(2, 1fr); } .alert-cosmic { flex-direction: column; text-align: center; gap: 0.75rem; } .section-header-cosmic { flex-direction: column; gap: 0.75rem; text-align: center; } .cosmic-card, .demo-card-cosmic, .platform-card-cosmic { padding: 1.25rem; } .asset-score-cosmic { width: 120px; height: 120px; } .asset-score-value { font-size: 2.5rem; } } @media (max-width: 480px) { .stats-grid-cosmic { grid-template-columns: 1fr; } .stat-card-cosmic { padding: 1rem; } .stat-value-cosmic { font-size: 1.75rem; } } /* ============================================================================= GALAXYWARDEN PREMIUM UI v2.0 ============================================================================= Design philosophy: RESTRAINT + DISTINCTIVENESS Kill list (generic AI dashboard stuff): - ❌ Grid overlay (every AI dashboard) - ❌ Scan line (cheesy) - ❌ Aurora / northern lights (generic canvas effect) - ❌ Cursor glow (screams CodePen) - ❌ Card tilt (cheap 3D effect) - ❌ Glow on everything (restraint!) Keep / Add (distinctive, polished): - ✅ Kill the grid entirely - ✅ Holographic card hover (gaming DNA — like holo trading cards) - ✅ Viewport corner brackets (HUD targeting feel) - ✅ Monospace data readouts (instrument panel) - ✅ Clean card elevation (subtle, no blur crutch) - ✅ Vignette edges (monitor/screen feel) - ✅ Film grain (analog texture) - ✅ Breathing sidebar accent (system alive) - ✅ Scroll reveal (cards come online) ============================================================================= */ /* ============================================================================= 0. KILL THE GRID — Gone. Forever. ============================================================================= */ .cyber-grid, .cyber-grid::before, .cyber-grid::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ============================================================================= 1. HOLOGRAPHIC CARD HOVER When you hover a card, a subtle rainbow sheen sweeps across the surface. Every gamer knows this — it's the holo trading card effect. Not a generic glow. A prismatic light catch. ============================================================================= */ .stat-card, .feature-card, .info-card, .metric-card, .quest-card, .member-card, .asset-card, .polished-card, .share-card, .breach-card { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* The holo sheen layer */ .stat-card::before, .feature-card::before, .polished-card::before, .share-card::before, .breach-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 20%, rgba(168, 213, 229, 0.03) 35%, rgba(167, 139, 250, 0.04) 42%, rgba(16, 185, 129, 0.03) 48%, rgba(96, 165, 250, 0.04) 55%, rgba(168, 213, 229, 0.03) 62%, transparent 80% ); opacity: 0; transform: translateX(-100%); transition: opacity 0.3s ease; pointer-events: none; z-index: 1; } .stat-card:hover::before, .feature-card:hover::before, .polished-card:hover::before, .share-card:hover::before, .breach-card:hover::before { opacity: 1; transform: translateX(100%); transition: opacity 0.2s ease, transform 0.7s ease; } /* Clean hover lift */ .stat-card:hover, .feature-card:hover, .polished-card:hover, .share-card:hover, .breach-card:hover { transform: translateY(-2px); border-color: rgba(168, 213, 229, 0.15) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 213, 229, 0.06) !important; } /* Dashboard cards — subtler */ .dashboard-card { transition: border-color 0.3s ease; } .dashboard-card:hover, .dashboard-card[open] { border-color: rgba(168, 213, 229, 0.12) !important; } /* ============================================================================= 2. VIEWPORT CORNER BRACKETS Small L-shaped brackets at the 4 corners of the main content area. Subtle HUD feel — "this is a monitored zone." No other dashboard does this. It's GalaxyWarden's frame. ============================================================================= */ .main-content, main { position: relative; } /* We create the brackets using a single pseudo-element with box-shadow trick */ .main-content::before, main::before { content: ''; position: fixed; top: 12px; left: 12px; width: 18px; height: 18px; border-top: 1.5px solid rgba(168, 213, 229, 0.15); border-left: 1.5px solid rgba(168, 213, 229, 0.15); pointer-events: none; z-index: 9990; } .main-content::after, main::after { content: ''; position: fixed; top: 12px; right: 12px; width: 18px; height: 18px; border-top: 1.5px solid rgba(168, 213, 229, 0.15); border-right: 1.5px solid rgba(168, 213, 229, 0.15); pointer-events: none; z-index: 9990; } /* Bottom brackets via body pseudo */ body > .main-content + style, body { position: relative; } /* ============================================================================= 3. MONOSPACE DATA READOUTS All numbers render in JetBrains Mono — like instrument displays. This alone makes the dashboard feel different from SaaS products. ============================================================================= */ /* JetBrains Mono loaded via shared.css font import */ .stat-value, .stat-number, .breach-count, .xp-value, .health-value, .tier-commission, .commission-amount, .session-time, .referral-code { font-family: 'JetBrains Mono', 'Fira Code', monospace !important; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* Referral link input — terminal feel */ .referral-link-input, input[readonly] { font-family: 'JetBrains Mono', monospace !important; font-size: 0.85rem; letter-spacing: 0.01em; } /* ============================================================================= 4. VIGNETTE — Monitor Edge Darkening Darkens the edges/corners of the viewport slightly. Makes it feel like you're looking at a dedicated security monitor, not a browser tab. Very subtle. Huge subconscious impact. ============================================================================= */ body::before { content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: radial-gradient( ellipse 70% 60% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.15) 100% ); } /* ============================================================================= 5. AMBIENT VIGNETTE (replaced film grain noise) Subtle edge darkening that adds depth without the grainy texture. ============================================================================= */ body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, transparent 50%, rgba(6,10,23,0.35) 100%); } /* ============================================================================= 6. BREATHING SIDEBAR ACCENT The active sidebar item has a subtle pulsing glow on its left edge. Says "this system is alive and monitoring" without being distracting. ============================================================================= */ @keyframes gwBreathe { 0%, 100% { opacity: 0.4; box-shadow: -3px 0 8px rgba(168, 213, 229, 0.08); } 50% { opacity: 0.8; box-shadow: -3px 0 14px rgba(168, 213, 229, 0.15); } } .sidebar-link.active, .sidebar a.active, [class*="sidebar"] a[class*="active"] { border-left: 2px solid var(--accent-cyan, #A8D5E5) !important; animation: gwBreathe 4s ease-in-out infinite; } /* ============================================================================= 7. STATUS-AWARE AMBIENT GLOW Only danger states get glow treatment. Not everything. Red threats pulse like a warning lamp. Green is steady. This is functional lighting, not decoration. ============================================================================= */ @keyframes gwThreatPulse { 0%, 100% { text-shadow: 0 0 12px rgba(239, 68, 68, 0.3); } 50% { text-shadow: 0 0 24px rgba(239, 68, 68, 0.55); } } /* Only HIGH/CRITICAL threat values pulse */ [style*="color: #ef4444"], [style*="color: #dc2626"] { animation: gwThreatPulse 2.5s ease-in-out infinite; } /* Success is steady — system nominal */ [style*="color: #10b981"], [style*="color: #22c55e"] { text-shadow: 0 0 10px rgba(16, 185, 129, 0.2); } /* ============================================================================= 8. BUTTON PRESS DEPTH Buttons depress on click like physical hardware controls. Small detail, big tactile feel. ============================================================================= */ .btn, .gw-btn, button[type="submit"], .copy-btn { transition: all 0.12s ease; } .btn:active, .gw-btn:active, button[type="submit"]:active, .copy-btn:active { transform: translateY(1px) scale(0.98) !important; filter: brightness(0.92); transition-duration: 0.05s; } /* ============================================================================= 9. INNER CARD HIGHLIGHT A subtle 1px top-edge highlight on cards that catches light. Like the machined edge of aluminum. Adds depth without shadows. ============================================================================= */ .stat-card::after, .dashboard-card > summary::after { content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.06) 70%, transparent ); pointer-events: none; z-index: 2; } /* ============================================================================= 10. ENHANCED NEBULA BACKGROUND With the grid gone, the nebula gradients carry the atmosphere. Add a second deeper layer for more depth. ============================================================================= */ /* Additional nebula depth — purple core glow */ .nebula-layer::after, .main-content > .nebula-layer::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 30% at 15% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 35% at 85% 75%, rgba(168, 213, 229, 0.05) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 50% 10%, rgba(96, 165, 250, 0.04) 0%, transparent 50%); z-index: -8; } /* ============================================================================= 11. REDUCED MOTION & MOBILE ============================================================================= */ @media (prefers-reduced-motion: reduce) { body::before, body::after { display: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { /* Kill vignette and grain on mobile for perf */ body::before, body::after { display: none; } /* No hover effects on touch */ .stat-card:hover, .feature-card:hover, .polished-card:hover { transform: none; } .stat-card:hover::before, .feature-card:hover::before, .polished-card:hover::before { opacity: 0; } /* Kill corner brackets on mobile */ .main-content::before, .main-content::after, main::before, main::after { display: none; } } /* ================================================================= GALAXYWARDEN — PREMIUM DARK UI v3 "How did they build this" tier. Glass, glow, depth, motion. ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&display=swap'); /* ── Kill body padding deadspace (shared.css sets 20px) ── */ /* Exclude has-sidebar so logged-in sidebar padding-left: 260px is preserved */ body:not(.has-sidebar) { padding: 0 !important; margin: 0 !important; } body.has-sidebar { margin: 0 !important; } /* ── Premium Design Tokens ── */ :root { --gw-primary: #10b981; --gw-primary-glow: rgba(16, 185, 129, 0.4); --gw-primary-soft: rgba(16, 185, 129, 0.08); --gw-accent: #a78bfa; --gw-accent-glow: rgba(167, 139, 250, 0.4); --gw-accent-soft: rgba(167, 139, 250, 0.08); --gw-gold: #fbbf24; --gw-gold-glow: rgba(251, 191, 36, 0.4); --gw-ice: #38bdf8; --gw-ice-glow: rgba(56, 189, 248, 0.4); --gw-bg: #060a13; --gw-bg-elevated: #0c1220; --gw-surface: rgba(15, 23, 42, 0.6); --gw-surface-solid: #0f172a; --gw-surface-2: rgba(30, 41, 59, 0.4); --gw-glass: rgba(15, 23, 42, 0.45); --gw-glass-border: rgba(148, 163, 184, 0.08); --gw-glass-shine: rgba(255, 255, 255, 0.03); --gw-border: rgba(148, 163, 184, 0.06); --gw-border-hover: rgba(148, 163, 184, 0.15); --gw-text: #f1f5f9; --gw-text-secondary: #94a3b8; --gw-text-dim: #475569; --gw-radius: 14px; --gw-radius-lg: 20px; --gw-radius-xl: 24px; } /* ── Animations ── */ @keyframes gw-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 15px) scale(0.95); } } @keyframes gw-pulse-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } @keyframes gw-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes gw-border-rotate { 0% { --gw-angle: 0deg; } 100% { --gw-angle: 360deg; } } @keyframes gw-fade-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes gw-grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 30% { transform: translate(3%, -15%); } 50% { transform: translate(12%, 9%); } 70% { transform: translate(9%, 4%); } 90% { transform: translate(-1%, 7%); } } /* ── Premium Identity Animations ── */ @keyframes gw-border-sweep { 0% { --gw-sweep: 0deg; } 100% { --gw-sweep: 360deg; } } @keyframes gw-threat-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--threat-glow, rgba(16,185,129,0.4)); } 50% { box-shadow: 0 0 0 8px transparent, 0 0 30px var(--threat-glow, rgba(16,185,129,0.2)); } } @keyframes gw-threat-ring-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes gw-severity-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes gw-vault-unlock { 0% { transform: scale(0.96); opacity: 0; filter: blur(4px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } } @keyframes gw-vault-perimeter { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @keyframes gw-input-scan { 0% { left: -10%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 110%; opacity: 0; } } @keyframes gw-scan-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes gw-result-reveal { 0% { opacity: 0; transform: translateY(16px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes gw-gauge-fill { 0% { stroke-dashoffset: var(--gauge-circumference, 283); } 100% { stroke-dashoffset: var(--gauge-target, 0); } } @keyframes gw-score-reveal { 0% { opacity: 0; transform: scale(0.5); filter: blur(8px); } 60% { transform: scale(1.1); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes gw-accent-glow { 0%, 100% { opacity: 0.4; filter: blur(80px); } 50% { opacity: 0.7; filter: blur(100px); } } /* ── Global Typography — GalaxyWarden Theme ── */ /* Body / UI text — clean readable Inter */ body, html, input, button, select, textarea, p, li, a, span, div, label, .gw-sticky-nav, .gw-nav-menu, .gw-nav-link, .hero-banner-description, .tier-card, .tier-card-cosmic, .cosmic-content { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important; } /* Display headings — sci-fi Rajdhani (readable but thematic) */ h1, h2, h3, h4, .mvp-section-title, .hero-banner-title, .mvp-how h2, .mvp-value-props h2, .mvp-stats h2, #pricing h2, .mvp-faq h2, .mvp-final-cta h2, .final-cta-banner h2, .mvp-demo-cta h2 { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; } /* Section subtitles — lighter weight Rajdhani */ h5, h6, .mvp-section-subtitle { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; } /* Logo text — bold Orbitron for brand identity */ .gw-nav-logo-text { font-family: 'Orbitron', 'Rajdhani', sans-serif !important; } /* Stat numbers — Orbitron for impact */ .mvp-stat-number, .stat-value, .dp-stat-value { font-family: 'Orbitron', 'Rajdhani', sans-serif !important; letter-spacing: 0.02em !important; } /* ── Global Ambient Vignette (replaced noise/grain) ── */ body::before { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, transparent 50%, rgba(6,10,23,0.4) 100%); } /* ══════════════════════════════════════════ NAVIGATION — Frosted Glass Premium ══════════════════════════════════════════ */ .gw-sticky-nav, .gw-sticky-nav-topnav, .gw-top-nav { height: 54px !important; border-bottom: 1px solid rgba(56, 189, 248, 0.08) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; background: rgba(6, 10, 19, 0.82) !important; box-shadow: 0 1px 0 var(--gw-glass-shine), 0 4px 30px rgba(0, 0, 0, 0.3) !important; padding: 0 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; } .gw-nav-container { max-width: 1400px !important; margin: 0 auto !important; height: 54px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 2.5rem !important; } /* All nav action buttons — more breathing room below */ .gw-nav-actions { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin-top: 2px !important; } .gw-nav-logo img { height: 30px !important; width: 30px !important; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.35)); } .gw-nav-logo-text { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* Unify .gw-top-nav (asset shield etc) to match main nav */ .gw-top-nav { display: flex !important; align-items: center !important; } .gw-top-nav .gw-nav-logo { display: flex !important; align-items: center !important; gap: 0.5rem !important; } .gw-top-nav .gw-nav-links { display: flex !important; align-items: center !important; gap: 1.5rem !important; margin-left: auto !important; } .gw-top-nav .gw-nav-links a { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--gw-text-secondary) !important; } .gw-top-nav .gw-nav-links a:hover { color: var(--gw-text) !important; } .gw-nav-link { font-size: 0.875rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gw-text-secondary) !important; transition: color 0.2s ease !important; } .gw-nav-link:hover { color: var(--gw-text) !important; } .gw-nav-cta { font-size: 0.85rem !important; font-weight: 600 !important; padding: 0.5rem 1.25rem !important; border-radius: 10px !important; background: var(--gw-primary) !important; color: white !important; text-transform: none !important; letter-spacing: 0 !important; transition: all 0.25s ease !important; border: none !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .gw-nav-cta:hover { box-shadow: 0 0 30px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-1px) !important; } .gw-nav-login { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--gw-text-secondary) !important; } /* Dropdown — glass */ .gw-nav-dropdown { border-radius: var(--gw-radius) !important; border: 1px solid var(--gw-glass-border) !important; background: rgba(12, 18, 32, 0.92) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--gw-glass-shine), inset 0 1px 0 var(--gw-glass-shine) !important; min-width: 220px !important; } .gw-nav-dropdown a { font-size: 0.85rem !important; font-weight: 500 !important; padding: 0.55rem 1rem !important; transition: background 0.15s ease !important; } .gw-nav-dropdown a:hover { background: rgba(255, 255, 255, 0.04) !important; } /* ── Nav Dropdown — Premium Glass Overhaul ── */ .gw-nav-dropdown, .gw-sticky-nav-topnav .gw-nav-dropdown { background: rgba(10, 15, 28, 0.96) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(16, 185, 129, 0.12) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px -20px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; padding: 0.5rem !important; min-width: 240px !important; } .gw-nav-dropdown a, .gw-sticky-nav-topnav .gw-nav-dropdown a { color: var(--gw-text-secondary) !important; border-radius: 10px !important; padding: 0.65rem 0.85rem !important; font-size: 0.85rem !important; font-weight: 500 !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; gap: 0.75rem !important; position: relative !important; } .gw-nav-dropdown a:hover, .gw-sticky-nav-topnav .gw-nav-dropdown a:hover { background: rgba(16, 185, 129, 0.08) !important; color: var(--gw-text) !important; } /* Dropdown icon containers — glass pill */ .gw-nav-dropdown-icon, .gw-sticky-nav-topnav .gw-nav-dropdown-icon { width: 32px !important; height: 32px !important; background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.1) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .gw-nav-dropdown a:hover .gw-nav-dropdown-icon { background: rgba(16, 185, 129, 0.14) !important; border-color: rgba(16, 185, 129, 0.2) !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important; } .gw-nav-dropdown-divider, .gw-sticky-nav-topnav .gw-nav-dropdown-divider { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.1), transparent) !important; margin: 0.35rem 0.5rem !important; } /* ── Nav Link Active/Hover States ── */ .gw-nav-link:hover, .gw-sticky-nav-topnav .gw-nav-link:hover { color: var(--gw-text) !important; background: rgba(16, 185, 129, 0.06) !important; border-radius: 8px !important; } .gw-nav-login:hover, .gw-sticky-nav-topnav .gw-nav-login:hover { color: var(--gw-text) !important; text-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important; } /* ══════════════════════════════════════════ MOBILE MENU DRAWER — Premium Glass Panel (marketing.py uses gw-mobile-drawer) ══════════════════════════════════════════ */ .gw-mobile-drawer, .gw-mobile-menu { background: rgba(8, 12, 24, 0.97) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border-left: 1px solid rgba(16, 185, 129, 0.1) !important; box-shadow: -12px 0 50px rgba(0, 0, 0, 0.6), -2px 0 0 rgba(16, 185, 129, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.03) !important; width: 300px !important; padding: 1.5rem !important; } /* Mobile menu header — premium treatment */ .gw-mobile-drawer-header, .gw-mobile-menu-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-bottom: 1.25rem !important; margin-bottom: 1.25rem !important; border-bottom: 1px solid rgba(16, 185, 129, 0.08) !important; } /* Close button — premium */ .gw-mobile-drawer-close, .gw-mobile-menu-header button { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; border-radius: 8px !important; color: var(--gw-text-secondary) !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.25rem !important; cursor: pointer !important; transition: all 0.2s ease !important; } .gw-mobile-drawer-close:hover, .gw-mobile-menu-header button:hover { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; } /* Mobile menu links — glass hover, left accent */ .gw-mobile-nav-link, .gw-mobile-menu-link { display: flex !important; align-items: center !important; gap: 0.75rem !important; color: var(--gw-text-secondary) !important; text-decoration: none !important; font-size: 0.95rem !important; font-weight: 500 !important; padding: 0.75rem 0.85rem !important; border-radius: 10px !important; margin-bottom: 2px !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; border: 1px solid transparent !important; } .gw-mobile-nav-link:hover, .gw-mobile-menu-link:hover { color: var(--gw-text) !important; background: rgba(16, 185, 129, 0.06) !important; border-color: rgba(16, 185, 129, 0.08) !important; transform: translateX(4px) !important; } /* Active mobile link */ .gw-mobile-nav-link.active, .gw-mobile-menu-link.active { color: var(--gw-text) !important; background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.12) !important; } /* Left accent bar on hover */ .gw-mobile-nav-link::before, .gw-mobile-menu-link::before { content: '' !important; position: absolute !important; left: 0 !important; top: 25% !important; bottom: 25% !important; width: 2px !important; border-radius: 2px !important; background: transparent !important; transition: all 0.25s ease !important; } .gw-mobile-nav-link:hover::before, .gw-mobile-menu-link:hover::before { background: rgba(16, 185, 129, 0.5) !important; } /* Mobile CTA button — premium green */ .gw-mobile-nav-cta { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; text-align: center !important; font-weight: 700 !important; padding: 0.85rem 1.25rem !important; border-radius: 12px !important; display: block !important; margin-top: 0.5rem !important; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important; transition: all 0.3s ease !important; text-decoration: none !important; border: none !important; } .gw-mobile-nav-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important; } /* Mobile nav divider */ .gw-mobile-nav-divider { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.1), transparent) !important; margin: 0.75rem 0.5rem !important; } /* Mobile overlay — heavier blur */ .gw-mobile-overlay, .gw-mobile-menu-overlay { background: rgba(2, 6, 15, 0.7) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } /* ══════════════════════════════════════════ HAMBURGER BUTTON — Premium Animation ══════════════════════════════════════════ */ .gw-mobile-menu-btn, .gw-sticky-nav-topnav .gw-mobile-menu-btn { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; border-radius: 8px !important; padding: 8px !important; transition: all 0.2s ease !important; cursor: pointer !important; } .gw-mobile-menu-btn:hover { background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.15) !important; } .gw-mobile-menu-btn span, .gw-sticky-nav-topnav .gw-mobile-menu-btn span { background: var(--gw-text-secondary) !important; width: 20px !important; height: 2px !important; border-radius: 2px !important; transition: all 0.3s ease !important; } /* ══════════════════════════════════════════ BOTTOM NAV — Authenticated User Mobile ══════════════════════════════════════════ */ .mobile-bottom-nav { background: rgba(8, 12, 24, 0.95) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; border-top: 1px solid rgba(16, 185, 129, 0.08) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4) !important; padding: 0.35rem 0 !important; } .mobile-nav-item { color: var(--gw-text-secondary) !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; padding: 0.35rem 0.5rem !important; border-radius: 8px !important; transition: all 0.2s ease !important; position: relative !important; font-size: 0.65rem !important; background: none !important; border: none !important; } .mobile-nav-item:hover { color: var(--gw-text) !important; } .mobile-nav-item.active { color: #10b981 !important; } /* Active dot indicator */ .mobile-nav-item.active::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 30% !important; right: 30% !important; height: 2px !important; background: #10b981 !important; border-radius: 2px !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4) !important; } .mobile-nav-icon { transition: all 0.2s ease !important; } .mobile-nav-item.active .mobile-nav-icon { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.3)) !important; } .mobile-nav-label { font-weight: 600 !important; letter-spacing: 0.02em !important; } .mobile-nav-badge { position: absolute !important; top: 2px !important; right: 8px !important; background: #ef4444 !important; color: white !important; font-size: 0.55rem !important; font-weight: 700 !important; min-width: 16px !important; height: 16px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 3px !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important; } /* ══════════════════════════════════════════ SIDEBAR NAV — Premium Glass Panel ══════════════════════════════════════════ */ .sidebar-nav { background: rgba(8, 12, 24, 0.97) !important; backdrop-filter: blur(30px) saturate(160%) !important; -webkit-backdrop-filter: blur(30px) saturate(160%) !important; border-right: 1px solid rgba(16, 185, 129, 0.06) !important; box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important; } .sidebar-header { border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important; padding-bottom: 1rem !important; margin-bottom: 1rem !important; } .sidebar-logo-icon { filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.2)) !important; } .ai-active-indicator { background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; font-size: 0.65rem !important; font-weight: 600 !important; padding: 0.2rem 0.5rem !important; border-radius: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Sidebar section headers */ .sidebar-section summary, .sidebar-section .section-title { color: var(--gw-text-secondary) !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* Sidebar links */ .sidebar-link { display: flex !important; align-items: center !important; gap: 0.65rem !important; color: var(--gw-text-secondary) !important; text-decoration: none !important; font-size: 0.85rem !important; font-weight: 500 !important; padding: 0.55rem 0.75rem !important; border-radius: 8px !important; transition: all 0.2s ease !important; margin-bottom: 1px !important; } .sidebar-link:hover { color: var(--gw-text) !important; background: rgba(16, 185, 129, 0.06) !important; } .sidebar-link.active { color: var(--gw-text) !important; background: rgba(16, 185, 129, 0.1) !important; border-left: 2px solid #10b981 !important; } .sidebar-link-icon { opacity: 0.6 !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .sidebar-link:hover .sidebar-link-icon, .sidebar-link.active .sidebar-link-icon { opacity: 1 !important; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.3)) !important; } .sidebar-link-text { font-weight: inherit !important; } .sidebar-link-badge { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; font-size: 0.65rem !important; font-weight: 700 !important; padding: 0.15rem 0.4rem !important; border-radius: 8px !important; margin-left: auto !important; } .sidebar-link-featured { color: #fbbf24 !important; } /* Sidebar footer */ .sidebar-footer { border-top: 1px solid rgba(148, 163, 184, 0.06) !important; padding-top: 0.75rem !important; margin-top: auto !important; } /* Sidebar collapse btn */ .sidebar-collapse-btn { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 6px !important; color: var(--gw-text-secondary) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .sidebar-collapse-btn:hover { background: rgba(16, 185, 129, 0.08) !important; color: var(--gw-text) !important; } /* Mobile sidebar overlay */ .sidebar-overlay, .mobile-sidebar-overlay { background: rgba(2, 6, 15, 0.65) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } /* ══════════════════════════════════════════ HERO — Cinematic with Ambient Glow Orbs ══════════════════════════════════════════ */ /* Hero banner artwork — visible, tinted to blend with dark UI */ .hero-banner-bg, .hero-banner-image { opacity: 0.35 !important; filter: saturate(0.7) brightness(0.55) !important; mix-blend-mode: normal !important; } /* Hide only the most distracting noise layers */ .cyber-bg, .cyber-grid, .particles, .scanlines, .scanline-overlay { display: none !important; } /* Keep subtle glow + vignette for depth */ .hero-banner-glow { display: block !important; background: radial-gradient(ellipse 60% 50% at 65% 35%, rgba(56, 189, 248, 0.06) 0%, transparent 70%) !important; opacity: 1 !important; } .hero-banner-vignette { display: block !important; background: radial-gradient(ellipse at center, transparent 40%, rgba(6, 10, 19, 0.6) 100%) !important; opacity: 1 !important; } /* Hero overlay — lets the image breathe through */ .hero-banner-overlay { background: radial-gradient(ellipse 80% 50% at 70% 40%, rgba(167, 139, 250, 0.1) 0%, transparent 70%), radial-gradient(ellipse 60% 60% at 20% 60%, rgba(56, 189, 248, 0.07) 0%, transparent 60%), linear-gradient(180deg, rgba(6, 10, 19, 0.55) 0%, rgba(6, 10, 19, 0.7) 50%, rgba(6, 10, 19, 0.92) 100%) !important; opacity: 1 !important; } .hero-banner { padding-top: 100px !important; min-height: auto !important; background: var(--gw-bg) !important; overflow: hidden !important; } .hero-banner-content { max-width: 560px !important; } /* Badge — glass pill */ .hero-banner-label { font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--gw-primary) !important; background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; padding: 0.35rem 1rem !important; border-radius: 100px !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; margin-bottom: 1.25rem !important; backdrop-filter: blur(10px) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(16, 185, 129, 0.1) !important; } .hero-banner-label svg { width: 14px !important; height: 14px !important; } /* Hero title — with gradient highlight */ .hero-banner-title { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-size: clamp(2.5rem, 5vw, 4rem) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--gw-text) !important; margin-bottom: 1.25rem !important; } .hero-banner-title .highlight { background: linear-gradient(135deg, #38bdf8, #67e8f9, #a78bfa, #38bdf8) !important; background-size: 300% 300% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: gw-gradient-shift 8s ease infinite !important; } .hero-banner-description { font-size: 1.1rem !important; line-height: 1.7 !important; color: var(--gw-text-secondary) !important; font-weight: 400 !important; margin-bottom: 1.75rem !important; } /* Trust checks */ .hero-trust-checks { gap: 1.25rem !important; margin-bottom: 1.75rem !important; } .hero-check { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--gw-text-secondary) !important; } .hero-check svg { color: var(--gw-primary) !important; filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4)); } /* Scan card — premium glass */ .hero-waitlist-card { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-xl) !important; padding: 1.5rem !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.05), inset 0 1px 0 var(--gw-glass-shine) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; } .hero-waitlist-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--gw-text) !important; } .hero-waitlist-form input[type="email"] { font-size: 0.95rem !important; border-radius: 12px !important; border: 1px solid var(--gw-glass-border) !important; background: rgba(15, 23, 42, 0.6) !important; color: var(--gw-text) !important; transition: all 0.2s ease !important; } .hero-waitlist-form input[type="email"]:focus { border-color: rgba(16, 185, 129, 0.3) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), 0 0 20px rgba(16, 185, 129, 0.08) !important; outline: none !important; } /* CTA Button — Cyberpunk Glassmorphic Neon */ .hero-waitlist-form button[type="submit"] { font-size: 0.9rem !important; font-weight: 700 !important; border-radius: 12px !important; background: rgba(16, 185, 129, 0.12) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(16, 185, 129, 0.5) !important; letter-spacing: 0.02em !important; text-transform: none !important; color: #e2e8f0 !important; text-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.2) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15), 0 0 80px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 20px rgba(16, 185, 129, 0.05) !important; position: relative !important; overflow: hidden !important; } .hero-waitlist-form button[type="submit"]::before { content: ''; position: absolute; inset: -1px; border-radius: 12px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(56, 189, 248, 0.3), rgba(167, 139, 250, 0.3), rgba(16, 185, 129, 0.6)); background-size: 300% 300%; animation: gw-neon-border-shift 4s ease infinite; z-index: -1; opacity: 0.4; filter: blur(1px); } .hero-waitlist-form button[type="submit"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), rgba(56, 189, 248, 0.1), transparent); background-size: 200% 100%; animation: gw-shimmer 3s ease-in-out infinite; } .hero-waitlist-form button[type="submit"]:hover { background: rgba(16, 185, 129, 0.2) !important; border-color: rgba(16, 185, 129, 0.7) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 60px rgba(16, 185, 129, 0.25), 0 0 100px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 30px rgba(16, 185, 129, 0.1) !important; transform: translateY(-2px) scale(1.02) !important; text-shadow: 0 0 25px rgba(16, 185, 129, 0.7), 0 0 50px rgba(16, 185, 129, 0.3) !important; } .hero-waitlist-form button[type="submit"]:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), 0 0 30px rgba(16, 185, 129, 0.2), inset 0 0 20px rgba(16, 185, 129, 0.1) !important; } /* Scroll indicator */ .hero-banner-scroll { color: var(--gw-text-dim) !important; opacity: 0.4 !important; } /* ══════════════════════════════════════════ AMBIENT GLOW ORBS (global background) ══════════════════════════════════════════ */ /* These create the premium floating glow effect */ #main-content { position: relative !important; } #main-content::before, #main-content::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(100px); } #main-content::before { width: 600px; height: 600px; background: radial-gradient(circle, rgba(16, 185, 129, 0.07) 0%, transparent 70%); top: -10%; left: -5%; animation: gw-float 20s ease-in-out infinite; } #main-content::after { width: 500px; height: 500px; background: radial-gradient(circle, rgba(167, 139, 250, 0.06) 0%, transparent 70%); bottom: 10%; right: -5%; animation: gw-float 25s ease-in-out infinite reverse; } /* ══════════════════════════════════════════ HIDE OLD COSMIC PRICING — safety net ══════════════════════════════════════════ */ .mvp-pricing#pricing .mvp-pricing-grid { display: none !important; } .mvp-pricing#pricing .mvp-pricing-note { display: none !important; } .mvp-pricing#pricing { padding-bottom: 0 !important; margin-bottom: -2rem !important; } .cosmic-light-source, .cosmic-mirror, .cosmic-depth, .cosmic-edge-top, .cosmic-edge-left, .cosmic-edge-right, .cosmic-edge-bottom, .cosmic-corner, .cosmic-corner-tl, .cosmic-corner-tr, .cosmic-corner-bl, .cosmic-corner-br, .cosmic-stars, .cosmic-stars span, .cosmic-nebula, .cosmic-nebula div { display: none !important; } /* ══════════════════════════════════════════ PRICING — Premium Glass Cards ══════════════════════════════════════════ */ #pricing { position: relative !important; } /* Ambient glow behind pricing section */ #pricing::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(ellipse 50% 40% at 25% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 75% 50%, rgba(167, 139, 250, 0.04) 0%, transparent 70%); pointer-events: none; } .pricing-grid:not(.mvp-pricing-grid) { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; max-width: 1120px !important; margin: 0 auto !important; } /* Glass card base */ .tier-card { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; overflow: visible !important; position: relative !important; clip-path: none !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .tier-card:hover { border-color: var(--gw-border-hover) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; transform: translateY(-4px) !important; } /* Commander — premium glow halo */ .tier-card[data-popular="true"] { border: 1px solid rgba(167, 139, 250, 0.25) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.1), 0 0 60px rgba(167, 139, 250, 0.08), 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(167, 139, 250, 0.1) !important; } .tier-card[data-popular="true"]:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 0 80px rgba(167, 139, 250, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(167, 139, 250, 0.15) !important; transform: translateY(-6px) !important; } /* Elite — gold glow */ .tier-card:last-child { border-color: rgba(251, 191, 36, 0.15) !important; } .tier-card:last-child:hover { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.1), 0 0 60px rgba(251, 191, 36, 0.06), 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(251, 191, 36, 0.08) !important; } /* CTA buttons — glow + shimmer */ .tier-card a[style*="background"], .crystal-cosmic a[style*="background"], .crystal-btn, [class*="crystal-btn"] { clip-path: none !important; border-radius: 12px !important; font-weight: 600 !important; font-size: 0.9rem !important; letter-spacing: 0 !important; text-transform: none !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; } .tier-card a[style*="background"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); background-size: 200% 100%; animation: gw-shimmer 4s ease-in-out infinite; } .tier-card a[style*="background"]:hover { transform: translateY(-1px) !important; filter: brightness(1.1) !important; } /* Billing toggle */ .billing-btn { font-size: 0.85rem !important; border-radius: 10px !important; transition: all 0.2s ease !important; } /* ══════════════════════════════════════════ FEATURE / VALUE CARDS — Glass ══════════════════════════════════════════ */ .mvp-value-card, .mvp-feature-card, .feature-card { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .mvp-value-card:hover, .mvp-feature-card:hover, .feature-card:hover { border-color: var(--gw-border-hover) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 30px rgba(16, 185, 129, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; transform: translateY(-3px) !important; } /* Value card icon glow */ .mvp-value-icon { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.3)) !important; } /* Stats — glow numbers */ .mvp-stat-number { font-weight: 900 !important; letter-spacing: -0.04em !important; color: var(--gw-text) !important; text-shadow: 0 0 40px rgba(16, 185, 129, 0.2) !important; } /* Stats section — ambient background */ .mvp-stats { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(16, 185, 129, 0.03) 0%, transparent 70%), var(--gw-surface) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-xl) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), inset 0 1px 0 var(--gw-glass-shine) !important; } /* ══════════════════════════════════════════ FAQ — Keep individual colors (premium) ══════════════════════════════════════════ */ /* The individual colors per FAQ question actually look premium — just ensure glass effect and uniform shape */ .mvp-faq details { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .mvp-faq details summary { color: var(--gw-text) !important; } /* ══════════════════════════════════════════ HOW IT WORKS — Glass Steps ══════════════════════════════════════════ */ .mvp-steps .mvp-step, .how-it-works-card, .mvp-step { background: linear-gradient(160deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5)) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 20px !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; padding: 2rem !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } .mvp-step:hover { border-color: rgba(167, 139, 250, 0.15) !important; transform: translateY(-6px) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 60px -20px rgba(167, 139, 250, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* Step number circles — glow */ .mvp-step-number, .step-number { box-shadow: 0 0 20px rgba(167, 139, 250, 0.2) !important; } /* ══════════════════════════════════════════ STEAM DEMO SECTION ══════════════════════════════════════════ */ .steam-demo-section, [id*="steam"] { border-color: var(--gw-glass-border) !important; } /* ══════════════════════════════════════════ BOTTOM CTA — Premium Glow ══════════════════════════════════════════ */ .mvp-final-cta a[style*="background"], .bottom-cta a { border-radius: 12px !important; clip-path: none !important; box-shadow: 0 0 30px rgba(16, 185, 129, 0.2) !important; position: relative !important; overflow: hidden !important; } .mvp-final-cta a[style*="background"]::after, .bottom-cta a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); background-size: 200% 100%; animation: gw-shimmer 4s ease-in-out infinite; } /* ══════════════════════════════════════════ SECTION HEADERS — Premium Typography ══════════════════════════════════════════ */ .mvp-section-title, .section-header, [class*="section-title"], .content-section h2 { font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--gw-text) !important; } /* ══════════════════════════════════════════ FOOTER — Premium Glass Treatment ══════════════════════════════════════════ */ footer, .site-footer, .footer, div.footer { border-top: 1px solid rgba(16, 185, 129, 0.08) !important; background: linear-gradient(180deg, rgba(6, 10, 19, 0.95), rgba(2, 6, 15, 1)) !important; padding: 2.5rem 1.5rem 1.5rem !important; position: relative !important; } /* Accent glow on footer top border */ footer::before, .footer::before, div.footer::before { content: '' !important; position: absolute !important; top: -1px !important; left: 10% !important; right: 10% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent) !important; } /* Footer links */ footer a, .footer a, div.footer a { color: var(--gw-text-secondary) !important; text-decoration: none !important; transition: color 0.2s ease !important; font-size: 0.8rem !important; } footer a:hover, .footer a:hover, div.footer a:hover { color: #10b981 !important; } /* Footer resource links (Security Guides, Blog, etc.) */ footer a[href="/guides"], footer a[href="/blog"], footer a[href="/breach-tracker"], footer a[href="/demo"], div.footer a[style*="A8D5E5"] { color: rgba(56, 189, 248, 0.7) !important; } footer a[href="/guides"]:hover, footer a[href="/blog"]:hover, div.footer a[style*="A8D5E5"]:hover { color: #38bdf8 !important; } /* Footer BATech branding */ footer img, .footer img, div.footer img { filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.15)) !important; opacity: 0.8 !important; transition: opacity 0.2s ease !important; } footer img:hover, div.footer img:hover { opacity: 1 !important; } /* Footer text and dividers */ footer span[style*="475569"], div.footer span[style*="475569"] { color: rgba(148, 163, 184, 0.2) !important; } /* Override inline footer styles for links */ div.footer a[style*="color: #A8D5E5"], div.footer a[style*="color:#A8D5E5"] { color: rgba(56, 189, 248, 0.7) !important; } div.footer a[style*="color: #64748b"], div.footer a[style*="color:#64748b"] { color: rgba(148, 163, 184, 0.5) !important; } /* Footer divider lines */ div.footer div[style*="border-top"] { border-top-color: rgba(148, 163, 184, 0.06) !important; } /* ══════════════════════════════════════════ SCROLLBAR — Thin premium ══════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.15); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.25); } /* ══════════════════════════════════════════ MOBILE RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 1024px) { .pricing-grid:not(.mvp-pricing-grid) { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .hero-banner { padding-top: 80px !important; } .hero-banner-title { font-size: 1.85rem !important; } .hero-banner-description { font-size: 0.95rem !important; } .hero-banner-bg, .hero-banner-image { opacity: 0.25 !important; } .pricing-grid:not(.mvp-pricing-grid) { grid-template-columns: 1fr !important; max-width: 400px !important; } .gw-mobile-drawer { background: rgba(6, 10, 19, 0.95) !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important; } .gw-mobile-nav-link { font-size: 0.9rem !important; font-weight: 500 !important; } .mvp-pricing#pricing .mvp-section-title, .mvp-pricing#pricing .mvp-section-subtitle { display: none !important; } /* Reduce ambient orbs on mobile */ #main-content::before { width: 300px; height: 300px; opacity: 0.5; } #main-content::after { width: 250px; height: 250px; opacity: 0.5; } } @media (max-width: 480px) { .hero-banner-title { font-size: 1.6rem !important; } .hero-trust-checks { flex-direction: column !important; gap: 0.5rem !important; } } /* ══════════════════════════════════════════ BADGE / TAG ══════════════════════════════════════════ */ .tier-badge, .popular-badge, [class*="badge"] { font-size: 0.7rem !important; font-weight: 700 !important; border-radius: 100px !important; letter-spacing: 0.03em !important; } /* ══════════════════════════════════════════ GENERIC OVERRIDES ══════════════════════════════════════════ */ /* Kill clip-path chamfers */ [style*="clip-path: polygon"] { clip-path: none !important; border-radius: var(--gw-radius) !important; } .crystal-cosmic { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; clip-path: none !important; backdrop-filter: blur(12px) !important; } /* ══════════════════════════════════════════ CONTENT WIDTH — Full-Width Scaling ══════════════════════════════════════════ */ /* Widen MVP containers from 1200px to fill more of the viewport */ .mvp-container { max-width: 1400px !important; padding: 0 3rem !important; margin: 0 auto !important; } /* Section wrappers — full bleed */ .mvp-value-props, .mvp-stats, .mvp-how, .mvp-demo-cta, #pricing, .mvp-faq, .mvp-final-cta, .final-cta-banner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Card grids — responsive full-width */ .mvp-value-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; width: 100% !important; } .mvp-steps-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; width: 100% !important; } .mvp-step { max-width: none !important; width: 100% !important; } /* Stats row — full width with even spacing */ .mvp-stats-row { display: flex !important; justify-content: space-around !important; width: 100% !important; gap: 1rem !important; } /* Pricing grid — wider */ .mvp-pricing-grid { max-width: 1200px !important; margin: 0 auto !important; } /* How-it-works container */ .how-container { max-width: 1200px !important; margin: 0 auto !important; } /* Hero content — adjust for new nav height (54px) */ .hero-banner { padding-top: 54px !important; } /* Page content offset for fixed nav */ .page-content, .mvp-main, main { padding-top: 0 !important; } /* Mobile width fixes */ @media (max-width: 768px) { .mvp-container { padding: 0 1.25rem !important; } .mvp-value-grid, .mvp-steps-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .mvp-stats-row { flex-wrap: wrap !important; justify-content: center !important; } .mvp-stat { min-width: 140px !important; } } @media (max-width: 1024px) { .mvp-value-grid { grid-template-columns: 1fr !important; max-width: 500px !important; margin: 0 auto !important; } .mvp-steps-grid { grid-template-columns: 1fr !important; max-width: 500px !important; margin: 0 auto !important; } } /* ══════════════════════════════════════════ KILL AMBIENT FLOATING ANIMATIONS These create visible "moving box" artifacts ══════════════════════════════════════════ */ /* shared-nebula — large floating gradient div, causes visible moving patches */ .shared-nebula { animation: none !important; opacity: 0.4 !important; transform: none !important; } /* hero-banner-glow — pulsing overlay at z-index 3, covers entire hero */ .hero-banner-glow { animation: none !important; opacity: 0.5 !important; } /* hero-banner-image — slow zoom animation can shift edges visibly */ .hero-banner-image { animation: none !important; } /* hero-banner-vignette — keep static */ .hero-banner-vignette { animation: none !important; } /* hero-banner-label float — keep it still, more professional */ .hero-banner-label { animation: none !important; } /* nebulaFloat, heroGlowPulse, heroImageZoom — force-disable everywhere */ [style*="nebulaFloat"], [style*="heroGlowPulse"], [style*="heroImageZoom"] { animation: none !important; } /* ══════════════════════════════════════════ PREMIUM UTILITY CLASSES ══════════════════════════════════════════ */ /* Glass card utility */ .gw-glass { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Glow text */ .gw-glow-green { text-shadow: 0 0 30px rgba(16, 185, 129, 0.4) !important; } .gw-glow-purple { text-shadow: 0 0 30px rgba(167, 139, 250, 0.4) !important; } .gw-glow-gold { text-shadow: 0 0 30px rgba(251, 191, 36, 0.4) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LANDING PAGE — High-Impact Premium Overhaul ║ ║ Ambient glows, animated accents, real depth, screenshot-worthy ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── New Keyframes for landing page ── */ @keyframes gw-float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-8px) rotate(0.5deg); } 66% { transform: translateY(4px) rotate(-0.3deg); } } @keyframes gw-glow-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } @keyframes gw-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gw-card-shine { 0% { left: -100%; } 100% { left: 200%; } } @keyframes gw-counter-glow { 0%, 100% { text-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } 50% { text-shadow: 0 0 40px rgba(16, 185, 129, 0.5), 0 0 80px rgba(16, 185, 129, 0.15); } } @keyframes gw-orb-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.1); } 50% { transform: translate(-10px, -35px) scale(0.95); } 75% { transform: translate(20px, 10px) scale(1.05); } } @keyframes gw-orb-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-25px, 15px) scale(1.05); } 50% { transform: translate(15px, 30px) scale(0.9); } 75% { transform: translate(-20px, -10px) scale(1.1); } } @keyframes gw-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes gw-neon-border-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes gw-neon-pulse { 0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15); } 50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.5), 0 0 60px rgba(16, 185, 129, 0.25), 0 0 100px rgba(16, 185, 129, 0.1); } } @keyframes gw-terminal-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes gw-scan-line-sweep { 0% { top: 0%; opacity: 0.6; } 50% { opacity: 0.3; } 100% { top: 100%; opacity: 0; } } @keyframes gw-data-stream { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } @keyframes gw-particle-float { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; } 25% { transform: translate(10px, -20px) scale(1.2); opacity: 0.6; } 50% { transform: translate(-5px, -40px) scale(0.8); opacity: 0.4; } 75% { transform: translate(15px, -60px) scale(1.1); opacity: 0.5; } } @keyframes gw-gradient-mesh { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @keyframes gw-section-glow-line { 0%, 100% { opacity: 0.3; background-position: -200% 0; } 50% { opacity: 0.6; background-position: 200% 0; } } /* ══════════════════════════════════════════ MAIN CONTENT — Ambient Background Orbs Floating colored glows between sections ══════════════════════════════════════════ */ #main-content, main, .page-content { position: relative !important; overflow: hidden !important; } /* Ambient orbs — DISABLED (caused visible moving box artifacts) */ #main-content::before, main::before, #main-content::after, main::after { display: none !important; animation: none !important; } /* ══════════════════════════════════════════ HERO BANNER — Dramatic with Ambient Glow ══════════════════════════════════════════ */ .hero-banner { position: relative !important; overflow: hidden !important; min-height: 85vh !important; display: flex !important; align-items: center !important; } /* Hero ambient glow — large green/blue orb behind content */ .hero-banner-glow, .hero-banner .hero-banner-overlay { background: radial-gradient(ellipse at 30% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 50%) !important; opacity: 1 !important; } /* Hero bg reinforcement for landing page context */ .hero-banner-bg, .hero-banner-image { opacity: 0.35 !important; filter: saturate(0.7) brightness(0.55) !important; mix-blend-mode: normal !important; } /* Hero label badge — "GAMING SECURITY" */ .hero-banner-label { background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(167, 139, 250, 0.08)) !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; color: #67e8f9 !important; font-family: 'Rajdhani', 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.8rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; padding: 0.4rem 1.25rem !important; border-radius: 100px !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.1) !important; animation: gw-float 6s ease-in-out infinite !important; } /* Hero title — much bolder with gradient accent */ .hero-banner-title { font-size: clamp(2.5rem, 5vw, 4rem) !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; color: #f8fafc !important; max-width: 700px !important; position: relative !important; z-index: 2 !important; } /* The "have been compromised" highlight — animated gradient */ .hero-banner-title .highlight, .hero-banner-title span[style*="gradient"], .hero-banner-title span { background: linear-gradient(135deg, #10b981, #38bdf8, #a78bfa, #10b981) !important; background-size: 300% 300% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: gw-gradient-shift 8s ease infinite !important; } .hero-banner-description { font-size: 1.1rem !important; line-height: 1.6 !important; color: rgba(148, 163, 184, 0.9) !important; max-width: 520px !important; position: relative !important; z-index: 2 !important; } /* Trust checks — green check badges */ .hero-trust-checks { position: relative !important; z-index: 2 !important; } .hero-check { color: rgba(148, 163, 184, 0.8) !important; font-size: 0.9rem !important; display: flex !important; align-items: center !important; gap: 0.4rem !important; } /* Hero email input card — glass with glow */ .hero-waitlist-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.7)) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid rgba(16, 185, 129, 0.12) !important; border-radius: 16px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 80px -20px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; position: relative !important; z-index: 2 !important; overflow: hidden !important; } /* Scan Free button in hero — Cyberpunk Neon Glass */ .hero-waitlist-card .mvp-btn-primary, .hero-waitlist-card button[type="submit"], .hero-waitlist-form button { background: rgba(16, 185, 129, 0.12) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(16, 185, 129, 0.5) !important; border-radius: 12px !important; color: #e2e8f0 !important; font-weight: 700 !important; text-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15), 0 0 80px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .hero-waitlist-card button:hover { transform: translateY(-2px) scale(1.02) !important; background: rgba(16, 185, 129, 0.2) !important; border-color: rgba(16, 185, 129, 0.7) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 60px rgba(16, 185, 129, 0.25), 0 0 100px rgba(16, 185, 129, 0.12), inset 0 0 30px rgba(16, 185, 129, 0.1) !important; } /* Hero scroll indicator */ .hero-banner-scroll { color: rgba(148, 163, 184, 0.3) !important; animation: gw-float 3s ease-in-out infinite !important; } /* Hero subtext — "Already have account?" */ .hero-banner-subtext { color: rgba(148, 163, 184, 0.5) !important; font-size: 0.85rem !important; position: relative !important; z-index: 2 !important; } .hero-banner-subtext a { color: rgba(56, 189, 248, 0.7) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .hero-banner-subtext a:hover { color: #38bdf8 !important; } /* ══════════════════════════════════════════ HERO TERMINAL VISUAL — Desktop Only ══════════════════════════════════════════ */ .hero-terminal-visual { display: none !important; } @media (min-width: 1024px) { /* Two-column hero layout on desktop */ .hero-banner { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4rem !important; } .hero-banner-content { max-width: none !important; width: 55% !important; flex-shrink: 0 !important; padding-right: 2rem !important; } .hero-terminal-visual { display: block !important; width: 42% !important; flex-shrink: 0 !important; position: relative !important; z-index: 2 !important; animation: gw-fade-in-up 1s ease 0.3s both !important; } .hero-banner-scroll { position: absolute !important; bottom: 2rem !important; left: 50% !important; transform: translateX(-50%) !important; } } /* Terminal window chrome */ .hero-terminal-window { background: rgba(6, 10, 19, 0.85) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), 0 0 60px rgba(16, 185, 129, 0.08), 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; animation: gw-neon-pulse 4s ease-in-out infinite !important; } .hero-terminal-header { display: flex !important; align-items: center !important; gap: 6px !important; padding: 10px 14px !important; background: rgba(255, 255, 255, 0.03) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .hero-terminal-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; display: inline-block !important; } .hero-terminal-title { font-family: 'Exo 2', monospace !important; font-size: 0.7rem !important; color: rgba(148, 163, 184, 0.5) !important; margin-left: 8px !important; } .hero-terminal-body { padding: 16px 18px !important; font-family: 'Courier New', monospace !important; font-size: 0.78rem !important; line-height: 1.8 !important; position: relative !important; overflow: hidden !important; } .hero-terminal-line { opacity: 0; animation: gw-fade-in-up 0.5s ease forwards; white-space: nowrap !important; } .hero-terminal-line-1 { animation-delay: 0.5s; } .hero-terminal-line-2 { animation-delay: 1.2s; } .hero-terminal-line-3 { animation-delay: 2.0s; } .hero-terminal-line-4 { animation-delay: 2.6s; } .hero-terminal-line-5 { animation-delay: 3.2s; } .hero-terminal-line-6 { animation-delay: 4.0s; } .hero-terminal-line-7 { animation-delay: 4.6s; } .hero-terminal-line-8 { animation-delay: 5.2s; } .hero-t-prompt { color: #10b981 !important; font-weight: 700 !important; } .hero-t-cmd { color: #38bdf8 !important; font-weight: 600 !important; } .hero-t-arg { color: #a78bfa !important; } .hero-t-status { margin-right: 4px !important; } .hero-t-text { color: #94a3b8 !important; } .hero-t-red { color: #f87171 !important; text-shadow: 0 0 10px rgba(248, 113, 113, 0.3) !important; } .hero-t-yellow { color: #fbbf24 !important; text-shadow: 0 0 10px rgba(251, 191, 36, 0.3) !important; } .hero-t-green { color: #34d399 !important; text-shadow: 0 0 10px rgba(52, 211, 153, 0.3) !important; } .hero-t-warn { margin-right: 4px !important; } .hero-t-ok { color: #10b981 !important; margin-right: 4px !important; } .hero-t-cursor { color: #10b981 !important; animation: gw-terminal-blink 1s step-end infinite !important; font-weight: 700 !important; } .hero-terminal-scanline { position: absolute !important; left: 0 !important; width: 100% !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent) !important; animation: gw-scan-line-sweep 3s ease-in-out infinite !important; pointer-events: none !important; } /* ══════════════════════════════════════════ SECTION BACKGROUNDS — Clean, minimal No heavy image backgrounds (caused "dead section" look) ══════════════════════════════════════════ */ /* Stats section — subtle top/bottom border glow only */ .mvp-stats { background: rgba(6, 10, 19, 0.95) !important; border-top: 1px solid rgba(56, 189, 248, 0.06) !important; border-bottom: 1px solid rgba(56, 189, 248, 0.06) !important; margin: 0 !important; padding: 2.5rem 0 !important; } /* Pricing section — clean dark with subtle glow */ #pricing { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(56, 189, 248, 0.03) 0%, transparent 70%), rgba(6, 10, 19, 1) !important; } /* Final CTA — subtle gradient only */ .final-cta-banner, .mvp-final-cta { background: linear-gradient(180deg, rgba(15, 20, 35, 1), rgba(6, 10, 19, 1)) !important; border-top: 1px solid rgba(56, 189, 248, 0.06) !important; } /* Demo CTA section — very subtle ambient */ .mvp-demo-cta { background: rgba(6, 10, 19, 1) !important; } /* How It Works — clean, no grid */ .mvp-how { background: rgba(6, 10, 19, 1) !important; } /* FAQ section — minimal */ .mvp-faq { background: rgba(6, 10, 19, 1) !important; border-top: 1px solid rgba(148, 163, 184, 0.04) !important; } /* ── Mobile Section Fixes ── */ @media (max-width: 768px) { /* Stats — proper centering, no negative margins */ .mvp-stats { margin: 0 !important; padding: 2rem 1rem !important; } .mvp-stats .mvp-container { padding: 0 0.5rem !important; } .mvp-stats .mvp-stats-grid, .mvp-stats [class*="grid"], .mvp-stats [class*="row"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; justify-items: center !important; text-align: center !important; } .mvp-stat { width: 100% !important; min-width: 0 !important; text-align: center !important; } .mvp-stat-number { font-size: 1.8rem !important; } /* All sections — no horizontal overflow */ .mvp-value-props, .mvp-how, .mvp-demo-cta, #pricing, .mvp-faq, .final-cta-banner { overflow-x: hidden !important; padding-left: 0 !important; padding-right: 0 !important; } /* Containers — proper mobile padding */ .mvp-container { padding: 0 1.25rem !important; } } /* Section divider lines between major sections */ .mvp-value-props::after, .mvp-how::after, .mvp-demo-cta::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 15% !important; right: 15% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.12), rgba(167, 139, 250, 0.08), transparent) !important; pointer-events: none !important; } /* ══════════════════════════════════════════ VALUE PROPS — Cards with Real Presence 3 feature cards: Deep Scan, AI, Asset Shield ══════════════════════════════════════════ */ .mvp-value-props { position: relative !important; z-index: 1 !important; padding: 5rem 0 !important; } /* Section ambient glow */ .mvp-value-props::before { content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 600px !important; height: 300px !important; background: radial-gradient(ellipse, rgba(16, 185, 129, 0.04) 0%, transparent 70%) !important; pointer-events: none !important; } .mvp-value-grid { gap: 1.5rem !important; position: relative !important; z-index: 1 !important; } .mvp-value-card { background: linear-gradient(160deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.55)) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 20px !important; padding: 2rem !important; transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } /* Top accent line per card — different colors */ .mvp-value-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 15% !important; right: 15% !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent) !important; border-radius: 0 0 2px 2px !important; transition: all 0.4s ease !important; } .mvp-value-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.4), transparent) !important; } .mvp-value-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent) !important; } /* Hover shine sweep */ .mvp-value-card::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 50% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent) !important; pointer-events: none !important; transition: none !important; } .mvp-value-card:hover::after { animation: gw-card-shine 0.8s ease forwards !important; } .mvp-value-card:hover { transform: translateY(-8px) !important; border-color: rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 80px -20px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } .mvp-value-card:nth-child(2):hover { border-color: rgba(167, 139, 250, 0.15) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 80px -20px rgba(167, 139, 250, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } .mvp-value-card:nth-child(3):hover { border-color: rgba(56, 189, 248, 0.15) !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 80px -20px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* Card accent line expands on hover */ .mvp-value-card:hover::before { left: 5% !important; right: 5% !important; } /* Value card icons — glow per card */ .mvp-value-icon { width: 56px !important; height: 56px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.25rem !important; transition: all 0.4s ease !important; position: relative !important; } /* Card 1 icon — green */ .mvp-value-card:nth-child(1) .mvp-value-icon { background: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; } .mvp-value-card:nth-child(1):hover .mvp-value-icon { box-shadow: 0 0 30px rgba(16, 185, 129, 0.2) !important; transform: scale(1.05) !important; } /* Card 2 icon — purple */ .mvp-value-card:nth-child(2) .mvp-value-icon { background: rgba(167, 139, 250, 0.1) !important; border: 1px solid rgba(167, 139, 250, 0.15) !important; box-shadow: 0 0 20px rgba(167, 139, 250, 0.1) !important; color: #a78bfa !important; } .mvp-value-card:nth-child(2):hover .mvp-value-icon { box-shadow: 0 0 30px rgba(167, 139, 250, 0.2) !important; transform: scale(1.05) !important; } /* Card 3 icon — blue */ .mvp-value-card:nth-child(3) .mvp-value-icon { background: rgba(56, 189, 248, 0.1) !important; border: 1px solid rgba(56, 189, 248, 0.15) !important; box-shadow: 0 0 20px rgba(56, 189, 248, 0.1) !important; color: #38bdf8 !important; } .mvp-value-card:nth-child(3):hover .mvp-value-icon { box-shadow: 0 0 30px rgba(56, 189, 248, 0.2) !important; transform: scale(1.05) !important; } /* Icon SVGs inside — inherit glow color */ .mvp-value-icon svg { filter: drop-shadow(0 0 6px currentColor) !important; transition: filter 0.3s ease !important; } .mvp-value-card:hover .mvp-value-icon svg { filter: drop-shadow(0 0 10px currentColor) !important; } /* Card titles — Rajdhani for galaxy theme */ .mvp-value-card h3, .mvp-step h3, .tier-card h3 { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 1.25rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #f1f5f9 !important; margin-bottom: 0.6rem !important; } .mvp-value-card p, .mvp-step p { color: rgba(148, 163, 184, 0.85) !important; font-size: 0.9rem !important; line-height: 1.65 !important; } /* ── Section Titles — Premium Galaxy Headings ── */ .mvp-section-title, .mvp-how h2, .mvp-value-props h2, .mvp-stats h2, #pricing h2, .mvp-faq h2, .mvp-final-cta h2, .final-cta-banner h2, .mvp-demo-cta h2 { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--gw-text) !important; text-shadow: 0 0 40px rgba(56, 189, 248, 0.12) !important; } .mvp-section-subtitle { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-size: 1.05rem !important; font-weight: 500 !important; letter-spacing: 0.04em !important; color: var(--gw-text-secondary) !important; text-transform: uppercase !important; } /* ══════════════════════════════════════════ STATS — Glowing Numbers 14B+, 700+, AI-Powered, etc. ══════════════════════════════════════════ */ .mvp-stats { position: relative !important; padding: 3rem 0 !important; z-index: 1 !important; } /* Stats divider — gradient line */ .mvp-stats::before { content: '' !important; position: absolute !important; top: 0 !important; left: 10% !important; right: 10% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.15), rgba(167, 139, 250, 0.1), transparent) !important; } .mvp-stats::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 10% !important; right: 10% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.1), rgba(16, 185, 129, 0.15), transparent) !important; } .mvp-stats-grid { gap: 2rem !important; } .mvp-stat { text-align: center !important; position: relative !important; } .mvp-stat-number { font-size: 2.5rem !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #f1f5f9 !important; font-variant-numeric: tabular-nums !important; animation: gw-counter-glow 4s ease-in-out infinite !important; line-height: 1.1 !important; } .mvp-stat:nth-child(1) .mvp-stat-number { background: linear-gradient(135deg, #10b981, #34d399) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .mvp-stat:nth-child(2) .mvp-stat-number { background: linear-gradient(135deg, #38bdf8, #7dd3fc) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .mvp-stat:nth-child(3) .mvp-stat-number { background: linear-gradient(135deg, #a78bfa, #c4b5fd) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .mvp-stat:nth-child(4) .mvp-stat-number { background: linear-gradient(135deg, #fbbf24, #fde68a) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .mvp-stat-label { color: rgba(148, 163, 184, 0.6) !important; font-size: 0.8rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-top: 0.3rem !important; } /* ══════════════════════════════════════════ HOW IT WORKS — Steps with Gradient Numbers ══════════════════════════════════════════ */ .mvp-how { position: relative !important; padding: 5rem 0 !important; z-index: 1 !important; } .mvp-section-title { font-size: 2rem !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #f1f5f9 !important; text-align: center !important; } .mvp-section-subtitle { color: rgba(148, 163, 184, 0.7) !important; font-size: 1rem !important; text-align: center !important; max-width: 500px !important; margin: 0 auto !important; } .mvp-steps { position: relative !important; z-index: 1 !important; } .mvp-step { background: linear-gradient(155deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5)) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 18px !important; padding: 1.75rem !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } .mvp-step:hover { transform: translateY(-6px) !important; border-color: rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08), 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 60px -15px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* Step numbers — gradient circles with glow */ .mvp-step-number { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 900 !important; font-size: 1.1rem !important; margin-bottom: 1rem !important; position: relative !important; z-index: 1 !important; } .mvp-step:nth-child(1) .mvp-step-number { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05)) !important; border: 2px solid rgba(16, 185, 129, 0.3) !important; color: #10b981 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.15) !important; } .mvp-step:nth-child(3) .mvp-step-number { background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05)) !important; border: 2px solid rgba(167, 139, 250, 0.3) !important; color: #a78bfa !important; box-shadow: 0 0 20px rgba(167, 139, 250, 0.15) !important; } .mvp-step:nth-child(5) .mvp-step-number { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0.05)) !important; border: 2px solid rgba(56, 189, 248, 0.3) !important; color: #38bdf8 !important; box-shadow: 0 0 20px rgba(56, 189, 248, 0.15) !important; } /* Step arrows — gradient */ .mvp-step-arrow { color: rgba(16, 185, 129, 0.3) !important; font-size: 1.5rem !important; } .mvp-step h3, .mvp-step-content h3 { font-weight: 800 !important; font-size: 1.1rem !important; color: #f1f5f9 !important; margin-bottom: 0.5rem !important; } .mvp-step p, .mvp-step-content p { color: rgba(148, 163, 184, 0.8) !important; font-size: 0.88rem !important; line-height: 1.55 !important; } /* ══════════════════════════════════════════ BUTTONS — Consistent Premium Green All primary CTAs across landing page ══════════════════════════════════════════ */ .mvp-btn-primary { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; border-radius: 12px !important; color: white !important; font-weight: 700 !important; font-size: 1rem !important; padding: 0.85rem 2rem !important; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; } .mvp-btn-primary:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 30px rgba(16, 185, 129, 0.45), 0 0 60px -10px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* Shimmer sweep */ .mvp-btn-primary::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; transition: left 0.6s ease !important; } .mvp-btn-primary:hover::before { left: 100% !important; } .mvp-cta-note { color: rgba(148, 163, 184, 0.5) !important; font-size: 0.8rem !important; } /* ══════════════════════════════════════════ DEMO CTA — Steam Account Section ══════════════════════════════════════════ */ .mvp-demo-cta { position: relative !important; padding: 4rem 0 !important; z-index: 1 !important; } .mvp-demo-card { background: linear-gradient(155deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.65)) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; border-radius: 20px !important; padding: 2.5rem !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.06), 0 12px 48px rgba(0, 0, 0, 0.3), 0 0 100px -30px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; position: relative !important; overflow: hidden !important; } /* Green accent glow behind demo card */ .mvp-demo-card::before { content: '' !important; position: absolute !important; top: -40px !important; left: 50% !important; transform: translateX(-50%) !important; width: 300px !important; height: 150px !important; background: radial-gradient(ellipse, rgba(16, 185, 129, 0.08) 0%, transparent 70%) !important; pointer-events: none !important; } .mvp-demo-icon { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.3)) !important; } /* Demo stat cards — mini glass */ .demo-stat-card { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 12px !important; padding: 0.75rem !important; transition: all 0.3s ease !important; } .demo-stat-card:hover { border-color: rgba(148, 163, 184, 0.12) !important; transform: translateY(-2px) !important; } .demo-stat-value { font-weight: 800 !important; font-size: 1.1rem !important; font-variant-numeric: tabular-nums !important; } .demo-stat-value.green { color: #10b981 !important; } .demo-stat-value.red { color: #ef4444 !important; } .demo-stat-value.orange { color: #f59e0b !important; } .demo-stat-label { color: rgba(148, 163, 184, 0.6) !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Live dot */ .live-dot { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #10b981 !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important; animation: gw-threat-pulse 2s ease-in-out infinite !important; } /* Demo toggle button */ .demo-toggle-btn { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; border-radius: 10px !important; color: var(--gw-text-secondary) !important; transition: all 0.2s ease !important; cursor: pointer !important; } .demo-toggle-btn:hover { background: rgba(16, 185, 129, 0.06) !important; border-color: rgba(16, 185, 129, 0.15) !important; color: var(--gw-text) !important; } /* ══════════════════════════════════════════ PRICING — Tier Cards with Personality ══════════════════════════════════════════ */ #pricing { position: relative !important; padding: 5rem 0 !important; z-index: 1 !important; } #pricing h2 { font-size: 2rem !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #f1f5f9 !important; text-align: center !important; } .pricing-grid { gap: 1rem !important; } /* All tier cards — premium glass */ .tier-card { background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 20px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .tier-card:hover { transform: translateY(-6px) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08), 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 60px -15px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* Popular/Commander — emphasized with purple glow */ .tier-card:nth-child(3) { border-color: rgba(167, 139, 250, 0.2) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.1), 0 12px 48px rgba(0, 0, 0, 0.3), 0 0 80px -20px rgba(167, 139, 250, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } .tier-card:nth-child(3)::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, transparent 10%, #a78bfa 40%, #c084fc 60%, transparent 90%) !important; } .tier-card:nth-child(3):hover { border-color: rgba(167, 139, 250, 0.3) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.15), 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 100px -25px rgba(167, 139, 250, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* Elite — gold accent */ .tier-card:nth-child(4) { border-color: rgba(251, 191, 36, 0.12) !important; } .tier-card:nth-child(4)::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent 15%, rgba(251, 191, 36, 0.3) 40%, rgba(245, 158, 11, 0.3) 60%, transparent 85%) !important; } /* Tier names */ .tier-card h3 { font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-size: 0.8rem !important; } /* Tier prices */ .tier-card .price, .tier-card [style*="font-size: 2.5rem"], .tier-card [style*="font-size:2.5rem"] { font-weight: 900 !important; letter-spacing: -0.03em !important; color: #f1f5f9 !important; } /* Tier CTA buttons */ .tier-card a[href*="register"], .tier-card .tier-cta, .tier-card a[style*="background"] { border-radius: 12px !important; font-weight: 700 !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; } .tier-card a[href*="register"]:hover, .tier-card .tier-cta:hover { transform: translateY(-2px) !important; } /* "POPULAR" badge */ .popular-badge, [style*="POPULAR"] { background: linear-gradient(135deg, #a78bfa, #c084fc) !important; color: white !important; font-weight: 700 !important; font-size: 0.65rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 0.25rem 0.75rem !important; border-radius: 100px !important; box-shadow: 0 0 16px rgba(167, 139, 250, 0.25) !important; } /* ══════════════════════════════════════════ FAQ — Clean Accordion Glass ══════════════════════════════════════════ */ .mvp-faq { position: relative !important; padding: 4rem 0 !important; z-index: 1 !important; } .mvp-faq details { background: linear-gradient(155deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.45)) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 14px !important; transition: all 0.3s ease !important; overflow: hidden !important; margin-bottom: 0.5rem !important; } .mvp-faq details:hover { border-color: rgba(16, 185, 129, 0.12) !important; } .mvp-faq details[open] { border-color: rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 30px -8px rgba(16, 185, 129, 0.06) !important; } .mvp-faq summary { padding: 1rem 1.25rem !important; cursor: pointer !important; font-weight: 700 !important; font-size: 0.95rem !important; color: #e2e8f0 !important; display: flex !important; align-items: center !important; gap: 0.75rem !important; transition: color 0.2s ease !important; } .mvp-faq summary:hover { color: #f1f5f9 !important; } /* ══════════════════════════════════════════ FINAL CTA — Full Gradient Section ══════════════════════════════════════════ */ .mvp-final-cta { position: relative !important; padding: 5rem 0 !important; z-index: 1 !important; text-align: center !important; } /* Ambient glow behind CTA */ .mvp-final-cta::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 500px !important; height: 300px !important; background: radial-gradient(ellipse, rgba(16, 185, 129, 0.06) 0%, rgba(167, 139, 250, 0.03) 40%, transparent 70%) !important; pointer-events: none !important; } .mvp-final-cta h2 { font-size: 2.25rem !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #f1f5f9 !important; } .mvp-final-cta p { color: rgba(148, 163, 184, 0.7) !important; font-size: 1.05rem !important; max-width: 500px !important; margin: 0 auto !important; } /* ══════════════════════════════════════════ NAV — Fix and Add Life ══════════════════════════════════════════ */ /* Nav bar — stronger glass, subtle bottom glow */ .gw-sticky-nav, .gw-sticky-nav-topnav { background: rgba(6, 10, 19, 0.8) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-bottom: 1px solid rgba(16, 185, 129, 0.06) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 30px rgba(0, 0, 0, 0.3) !important; } /* Nav CTA — always green, never red */ .gw-nav-cta, .gw-sticky-nav-topnav .gw-nav-cta, header .gw-nav-cta, a.gw-nav-cta { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.25s ease !important; } .gw-nav-cta:hover, a.gw-nav-cta:hover { box-shadow: 0 0 30px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-1px) !important; } /* Logo text — ice-blue gradient to match gwlogo crystal shield */ .gw-nav-logo-text, .gw-sticky-nav-topnav .gw-nav-logo-text { background: linear-gradient(135deg, #38bdf8, #67e8f9) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; } /* ══════════════════════════════════════════ LANDING MOBILE RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 768px) { .hero-banner-title { font-size: 2rem !important; } .mvp-value-card:hover, .mvp-step:hover, .tier-card:hover { transform: translateY(-4px) !important; } .mvp-stat-number { font-size: 2rem !important; } #main-content::before, #main-content::after, main::before, main::after { width: 250px !important; height: 250px !important; } .mvp-demo-card { padding: 1.5rem !important; border-radius: 16px !important; } } @media (max-width: 480px) { .hero-banner-title { font-size: 1.7rem !important; } .mvp-value-card::after { display: none !important; } #main-content::before, #main-content::after, main::before, main::after { display: none !important; } .mvp-value-card:hover, .mvp-step:hover, .tier-card:hover { transform: translateY(-2px) !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 1: DASHBOARD — Command Center Identity ║ ║ Visual DNA: Military HUD + threat-responsive + layered depth ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Ambient: Reduce cosmic noise, add command center ambiance ── */ .container .cyber-bg, .container .cyber-grid, .container .particles, .container .scanlines, .container .scanline-overlay, .container .nebula-layer { opacity: 0.03 !important; } /* ══════════════════════════════════════════════════ COMMAND CENTER HEADER — Animated Border Sweep The crown of the dashboard, feels like a cockpit HUD ══════════════════════════════════════════════════ */ .cc-console-header { position: relative !important; background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.75)) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: none !important; border-radius: var(--gw-radius-lg) !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 80px -20px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* Animated conic-gradient border sweep — command center signature */ .cc-console-header::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1px !important; background: conic-gradient( from var(--gw-border-angle, 0deg), transparent 0%, rgba(16, 185, 129, 0.5) 10%, rgba(56, 189, 248, 0.4) 20%, transparent 30%, transparent 70%, rgba(167, 139, 250, 0.3) 80%, rgba(16, 185, 129, 0.5) 90%, transparent 100% ) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; animation: gw-border-sweep 6s linear infinite !important; pointer-events: none !important; z-index: 1 !important; } /* HUD corner accents */ .cc-console-header::after { content: '' !important; position: absolute !important; top: 6px !important; left: 6px !important; right: 6px !important; bottom: 6px !important; border-radius: calc(var(--gw-radius-lg) - 4px) !important; border: 1px solid rgba(16, 185, 129, 0.06) !important; pointer-events: none !important; z-index: 0 !important; } .cc-console-title h1, .cc-console-text { font-family: 'Inter', -apple-system, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--gw-text) !important; position: relative !important; z-index: 2 !important; } /* Readouts — mini HUD panels */ .cc-system-readouts { gap: 0.75rem !important; position: relative !important; z-index: 2 !important; } .cc-readout { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(56, 189, 248, 0.1) !important; border-radius: 10px !important; padding: 0.5rem 0.75rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; } .cc-readout::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), transparent) !important; border-radius: 3px 0 0 3px !important; } .cc-readout:hover { border-color: rgba(56, 189, 248, 0.25) !important; background: rgba(15, 23, 42, 0.75) !important; transform: translateY(-1px) !important; } .cc-readout-label { color: var(--gw-text-secondary) !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; } .cc-readout-value { color: var(--gw-text) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; } /* ══════════════════════════════════════════════════ THREAT INDICATOR RING — Real-time Severity Pulse Glows differently based on threat level ══════════════════════════════════════════════════ */ .threat-indicator, .threat-ring, .breach-hero-section .threat-level-indicator { position: relative !important; } /* Threat ring pulse — color set by inline --threat-color or defaults */ .threat-ring::after, .threat-indicator::after { content: '' !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; background: transparent !important; box-shadow: 0 0 20px var(--threat-glow, rgba(16, 185, 129, 0.3)) !important; animation: gw-threat-pulse 2s ease-in-out infinite !important; pointer-events: none !important; } /* Severity-specific glow colors — matched to risk classes */ .critical-risk .threat-indicator::after, .threat-indicator.critical::after, [style*="risk_level='critical'"] .threat-indicator::after { --threat-glow: rgba(239, 68, 68, 0.5) !important; animation-duration: 1s !important; } .high-risk .threat-indicator::after, .threat-indicator.high::after { --threat-glow: rgba(249, 115, 22, 0.45) !important; animation-duration: 1.4s !important; } .medium-risk .threat-indicator::after, .threat-indicator.medium::after { --threat-glow: rgba(245, 158, 11, 0.4) !important; animation-duration: 1.8s !important; } .low-risk .threat-indicator::after, .threat-indicator.low::after, .secured .threat-indicator::after { --threat-glow: rgba(16, 185, 129, 0.35) !important; animation-duration: 2.5s !important; } /* Spinning ring border for main threat display */ .breach-hero-card .threat-ring, .threat-ring-display { position: relative !important; } .breach-hero-card .threat-ring::before, .threat-ring-display::before { content: '' !important; position: absolute !important; inset: -6px !important; border-radius: 50% !important; border: 2px dashed rgba(16, 185, 129, 0.2) !important; animation: gw-threat-ring-spin 20s linear infinite !important; pointer-events: none !important; } /* ══════════════════════════════════════════════════ BREACH CARDS — Severity-Weighted Visual Hierarchy Critical breaches DEMAND attention; resolved ones recede ══════════════════════════════════════════════════ */ .breach-hero-card, .breach-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.65)) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; padding: 1.5rem !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } /* Severity left-accent bar — visual weight indicator */ .breach-hero-card::before, .breach-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 4px !important; height: 100% !important; border-radius: 4px 0 0 4px !important; background: linear-gradient(to bottom, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.1)) !important; transition: background 0.3s ease !important; } /* Critical — red accent, stronger shadow, breathing animation */ .breach-card.critical-risk, .breach-card[data-severity="critical"], .breach-item.critical-risk { border-color: rgba(239, 68, 68, 0.25) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1), 0 8px 32px rgba(239, 68, 68, 0.12), 0 0 60px -15px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(239, 68, 68, 0.06) !important; animation: gw-severity-breathe 3s ease-in-out infinite !important; --severity-color: rgba(239, 68, 68, 0.5) !important; } .breach-card.critical-risk::before, .breach-item.critical-risk::before { background: linear-gradient(to bottom, #ef4444, rgba(239, 68, 68, 0.2)) !important; width: 4px !important; } /* High — orange accent, medium shadow */ .breach-card.high-risk, .breach-card[data-severity="high"], .breach-item.high-risk { border-color: rgba(249, 115, 22, 0.2) !important; box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.08), 0 6px 24px rgba(249, 115, 22, 0.1), 0 0 40px -12px rgba(249, 115, 22, 0.1), inset 0 1px 0 rgba(249, 115, 22, 0.05) !important; } .breach-card.high-risk::before, .breach-item.high-risk::before { background: linear-gradient(to bottom, #f97316, rgba(249, 115, 22, 0.15)) !important; } /* Medium — yellow accent, subtle shadow */ .breach-card.medium-risk, .breach-card[data-severity="medium"], .breach-item.medium-risk { border-color: rgba(245, 158, 11, 0.15) !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.06), 0 4px 16px rgba(245, 158, 11, 0.06), inset 0 1px 0 rgba(245, 158, 11, 0.04) !important; } .breach-card.medium-risk::before, .breach-item.medium-risk::before { background: linear-gradient(to bottom, #f59e0b, rgba(245, 158, 11, 0.1)) !important; } /* Low / Secured — green accent, recedes visually */ .breach-card.low-risk, .breach-card.secured, .breach-card[data-severity="low"], .breach-item.low-risk, .breach-item.secured { border-color: rgba(16, 185, 129, 0.12) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.05), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(16, 185, 129, 0.03) !important; opacity: 0.85 !important; } .breach-card.low-risk::before, .breach-card.secured::before, .breach-item.secured::before { background: linear-gradient(to bottom, #10b981, rgba(16, 185, 129, 0.1)) !important; } /* Breach card hover — lifts with severity-tinted glow */ .breach-card:hover, .breach-item:hover { transform: translateY(-3px) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 50px -10px var(--severity-color, rgba(16, 185, 129, 0.1)), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Breach list items in the scrolling log */ .breach-list-item, .breach-log-entry { background: rgba(15, 23, 42, 0.45) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 10px !important; padding: 0.75rem 1rem !important; margin-bottom: 0.5rem !important; transition: all 0.25s ease !important; position: relative !important; } .breach-list-item:hover, .breach-log-entry:hover { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(148, 163, 184, 0.12) !important; transform: translateX(4px) !important; } /* ══════════════════════════════════════════════════ STAT CARDS — Per-type Accent Colors Each metric type has its own personality ══════════════════════════════════════════════════ */ .stat-card, .quick-stat, .dashboard-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.6)) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .stat-card:hover, .quick-stat:hover, .dashboard-card:hover { transform: translateY(-4px) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 60px -15px rgba(16, 185, 129, 0.1), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Stat value — big number with green glow */ .stat-card-value, .stat-value, .quick-stat-value { font-weight: 800 !important; font-variant-numeric: tabular-nums !important; color: var(--gw-text) !important; text-shadow: 0 0 40px rgba(16, 185, 129, 0.2) !important; } /* Stat card icon container — colored glow per type */ .stat-card-icon, .stat-icon { border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; } /* Per-card-type accent via nth-child — protection, threats, scans, score */ .stat-card:nth-child(1) .stat-card-icon, .stat-card:nth-child(1) .stat-icon { box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important; } .stat-card:nth-child(1) .stat-card-value { color: #10b981 !important; } .stat-card:nth-child(2) .stat-card-icon, .stat-card:nth-child(2) .stat-icon { box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important; } .stat-card:nth-child(2) .stat-card-value { color: #f87171 !important; } .stat-card:nth-child(3) .stat-card-icon, .stat-card:nth-child(3) .stat-icon { box-shadow: 0 0 20px rgba(56, 189, 248, 0.2) !important; } .stat-card:nth-child(3) .stat-card-value { color: #38bdf8 !important; } .stat-card:nth-child(4) .stat-card-icon, .stat-card:nth-child(4) .stat-icon { box-shadow: 0 0 20px rgba(167, 139, 250, 0.2) !important; } .stat-card:nth-child(4) .stat-card-value { color: #a78bfa !important; } /* Top accent line per card — subtle color hint */ .stat-card::after { content: '' !important; position: absolute !important; top: 0 !important; left: 20% !important; right: 20% !important; height: 2px !important; border-radius: 0 0 2px 2px !important; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent) !important; transition: all 0.3s ease !important; } .stat-card:nth-child(2)::after { background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.3), transparent) !important; } .stat-card:nth-child(3)::after { background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent) !important; } .stat-card:nth-child(4)::after { background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.3), transparent) !important; } .stat-card:hover::after { left: 10% !important; right: 10% !important; opacity: 1 !important; } /* ══════════════════════════════════════════════════ MISSION CARDS — Glass with Progress Indicators ══════════════════════════════════════════════════ */ .mission-card, .active-mission { background: linear-gradient(145deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.58)) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden !important; position: relative !important; } .mission-card:hover, .active-mission:hover { transform: translateY(-3px) translateX(2px) !important; border-color: rgba(167, 139, 250, 0.2) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px -8px rgba(167, 139, 250, 0.1), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Mission progress bar — purple accent */ .mission-progress, .mission-progress-bar { background: rgba(15, 23, 42, 0.5) !important; border-radius: 6px !important; overflow: hidden !important; height: 6px !important; } .mission-progress-fill, .mission-progress-bar > div, .mission-progress .progress-fill { background: linear-gradient(90deg, var(--gw-accent), #c084fc) !important; border-radius: 6px !important; box-shadow: 0 0 12px rgba(167, 139, 250, 0.4) !important; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } .cc-mission-stats { display: flex !important; gap: 0.5rem !important; } .cc-mission-stat { background: rgba(15, 23, 42, 0.45) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 8px !important; padding: 0.4rem 0.6rem !important; font-variant-numeric: tabular-nums !important; } /* ══════════════════════════════════════════════════ ACTIVITY LOG — Subtle Timeline ══════════════════════════════════════════════════ */ .activity-log, .activity-feed { position: relative !important; } /* Timeline line */ .activity-log::before, .activity-feed::before { content: '' !important; position: absolute !important; left: 20px !important; top: 0 !important; bottom: 0 !important; width: 1px !important; background: linear-gradient(to bottom, rgba(16, 185, 129, 0.2), rgba(148, 163, 184, 0.05)) !important; } .activity-item, .activity-entry { background: rgba(15, 23, 42, 0.35) !important; border: 1px solid transparent !important; border-radius: 10px !important; padding: 0.6rem 0.8rem !important; margin-bottom: 0.4rem !important; transition: all 0.25s ease !important; position: relative !important; } .activity-item:hover, .activity-entry:hover { background: rgba(15, 23, 42, 0.55) !important; border-color: rgba(148, 163, 184, 0.08) !important; transform: translateY(-1px) !important; } .activity-item .activity-icon, .activity-entry .activity-icon { transition: all 0.3s ease !important; } .activity-item:hover .activity-icon { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)) !important; } .activity-time, .activity-timestamp { color: var(--gw-text-secondary) !important; font-size: 0.75rem !important; font-variant-numeric: tabular-nums !important; } /* ══════════════════════════════════════════════════ BREACH HERO — Main Threat Display ══════════════════════════════════════════════════ */ .breach-hero-section, .breach-hero-card { background: linear-gradient(160deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.72)) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 18px !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 100px -30px var(--threat-glow, rgba(16, 185, 129, 0.1)), inset 0 1px 0 var(--gw-glass-shine) !important; overflow: hidden !important; position: relative !important; } /* Breach score — large dramatic number */ .breach-score, .breach-hero-score, .score-display { font-size: 3rem !important; font-weight: 900 !important; font-variant-numeric: tabular-nums !important; line-height: 1 !important; position: relative !important; } /* Score color per severity */ .breach-score.critical, [data-risk="critical"] .breach-score { color: #ef4444 !important; text-shadow: 0 0 40px rgba(239, 68, 68, 0.4), 0 0 80px rgba(239, 68, 68, 0.15) !important; } .breach-score.high, [data-risk="high"] .breach-score { color: #f97316 !important; text-shadow: 0 0 40px rgba(249, 115, 22, 0.35) !important; } .breach-score.medium, [data-risk="medium"] .breach-score { color: #f59e0b !important; text-shadow: 0 0 30px rgba(245, 158, 11, 0.3) !important; } .breach-score.low, .breach-score.secured, [data-risk="low"] .breach-score { color: #10b981 !important; text-shadow: 0 0 30px rgba(16, 185, 129, 0.3) !important; } .breach-hero-badge, .breach-badge { background: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; border-radius: 20px !important; padding: 0.3rem 0.8rem !important; font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #10b981 !important; } /* ══════════════════════════════════════════════════ MODAL OVERLAYS — Glass with Depth ══════════════════════════════════════════════════ */ .tutorial-modal, .modal-overlay, .upgrade-modal { background: rgba(2, 6, 23, 0.8) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .tutorial-modal-content, .modal-content, .upgrade-hero { background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 20px !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 120px -30px rgba(16, 185, 129, 0.08), inset 0 1px 0 var(--gw-glass-shine) !important; } /* ══════════════════════════════════════════════════ TIER BADGES — Gold, Purple, Green Personalities ══════════════════════════════════════════════════ */ .tier-badge, .user-tier-badge { border-radius: 20px !important; padding: 0.25rem 0.75rem !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .tier-badge.elite, .tier-badge[data-tier="elite"] { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)) !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; color: #fbbf24 !important; box-shadow: 0 0 16px rgba(251, 191, 36, 0.15) !important; } .tier-badge.commander, .tier-badge.pro, .tier-badge[data-tier="pro"], .tier-badge[data-tier="commander"] { background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(139, 92, 246, 0.1)) !important; border: 1px solid rgba(167, 139, 250, 0.3) !important; color: #a78bfa !important; box-shadow: 0 0 16px rgba(167, 139, 250, 0.12) !important; } .tier-badge.explorer, .tier-badge[data-tier="explorer"], .tier-badge[data-tier="free"] { background: rgba(148, 163, 184, 0.08) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; color: var(--gw-text-secondary) !important; } /* ══════════════════════════════════════════════════ DASHBOARD SECTIONS — Consistent Glass Panels ══════════════════════════════════════════════════ */ .dashboard-section, .section-card, .cc-section { background: linear-gradient(145deg, rgba(15, 23, 42, 0.65), rgba(30, 41, 59, 0.5)) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; } .section-header, .cc-section-header, .dashboard-section-header { border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important; padding-bottom: 0.75rem !important; margin-bottom: 1rem !important; } .section-title, .cc-section-title { font-weight: 700 !important; color: var(--gw-text) !important; letter-spacing: -0.01em !important; } /* ══════════════════════════════════════════════════ BUTTONS — Green Energy with Depth ══════════════════════════════════════════════════ */ .dashboard-btn, .action-btn, .cc-btn-primary { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; border-radius: 10px !important; color: white !important; font-weight: 600 !important; padding: 0.6rem 1.25rem !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .dashboard-btn:hover, .action-btn:hover, .cc-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* Shimmer on hover */ .dashboard-btn::before, .action-btn::before, .cc-btn-primary::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important; transition: left 0.5s ease !important; } .dashboard-btn:hover::before, .action-btn:hover::before, .cc-btn-primary:hover::before { left: 100% !important; } /* Secondary buttons */ .cc-btn-secondary, .btn-outline { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 10px !important; color: var(--gw-text-secondary) !important; font-weight: 600 !important; transition: all 0.3s ease !important; } .cc-btn-secondary:hover, .btn-outline:hover { background: rgba(15, 23, 42, 0.7) !important; border-color: rgba(16, 185, 129, 0.2) !important; color: var(--gw-text) !important; transform: translateY(-1px) !important; } /* ══════════════════════════════════════════════════ TEASER / UPGRADE PROMPTS — Purple Accent ══════════════════════════════════════════════════ */ .teaser-overlay, .upgrade-prompt, .feature-teaser { background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8)) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(167, 139, 250, 0.15) !important; border-radius: var(--gw-radius-lg) !important; box-shadow: 0 0 40px -10px rgba(167, 139, 250, 0.1) !important; } .teaser-stat { background: rgba(167, 139, 250, 0.08) !important; border: 1px solid rgba(167, 139, 250, 0.12) !important; border-radius: 8px !important; padding: 0.4rem 0.6rem !important; } .upgrade-cta, .teaser-cta { background: linear-gradient(135deg, var(--gw-accent), #c084fc) !important; color: white !important; font-weight: 700 !important; border: none !important; border-radius: 10px !important; box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3) !important; } .upgrade-cta:hover, .teaser-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(167, 139, 250, 0.4) !important; } /* ══════════════════════════════════════════════════ GENERIC DASHBOARD OVERRIDES — inline styles ══════════════════════════════════════════════════ */ /* Override inline backgrounds on dashboard containers */ [style*="background"][class*="dashboard"], [style*="background"][class*="section-card"], [style*="background"][class*="stat-card"] { background: linear-gradient(145deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.6)) !important; } /* Override inline borders */ [style*="border"][class*="card"], [style*="border"][class*="stat"], [style*="border"][class*="breach"] { border: 1px solid var(--gw-glass-border) !important; } /* Text color overrides */ [style*="color: rgb(148"] { color: var(--gw-text-secondary) !important; } [style*="color: rgb(226"], [style*="color: rgb(241"], [style*="color: rgb(248"] { color: var(--gw-text) !important; } /* ══════════════════════════════════════════════════ DASHBOARD RESPONSIVE — Mobile Command Center ══════════════════════════════════════════════════ */ @media (max-width: 768px) { .cc-console-header::before { animation-duration: 10s !important; } .breach-hero-card, .stat-card, .mission-card, .dashboard-card { border-radius: 12px !important; } .breach-score, .breach-hero-score { font-size: 2.25rem !important; } .stat-card:hover, .mission-card:hover, .dashboard-card:hover { transform: translateY(-2px) !important; } } @media (max-width: 480px) { .cc-console-header::before { animation: none !important; background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), transparent) !important; -webkit-mask: none !important; mask: none !important; height: 1px !important; top: auto !important; bottom: 0 !important; padding: 0 !important; } .threat-ring::after, .threat-indicator::after { animation-duration: 4s !important; } .stat-card::after { display: none !important; } .teaser-stat { padding: 0.3rem 0.5rem !important; font-size: 0.75rem !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 2: AUTHENTICATION — Vault Entry Experience ║ ║ Visual DNA: Security vault + ice-blue accents + dramatic entry ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Auth page ambient — darker, more dramatic than dashboard ── */ .login-container, .register-container, .auth-container { position: relative !important; min-height: 100vh !important; } /* Vault ambient glow — blue-tinged radial behind the card */ .login-container::before, .register-container::before, .auth-container::before { content: '' !important; position: fixed !important; top: 40% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 600px !important; height: 600px !important; background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, rgba(16, 185, 129, 0.03) 40%, transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; } /* ══════════════════════════════════════════════════ LOGIN CARD — The Vault Door Heavy glass, dramatic shadow, animated perimeter ══════════════════════════════════════════════════ */ .login-card, .register-card, .auth-card { background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.85)) !important; backdrop-filter: blur(24px) saturate(170%) !important; -webkit-backdrop-filter: blur(24px) saturate(170%) !important; border: 1px solid rgba(56, 189, 248, 0.1) !important; border-radius: 20px !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.06), 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 120px -40px rgba(56, 189, 248, 0.08), 0 0 200px -60px rgba(16, 185, 129, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; position: relative !important; overflow: hidden !important; animation: gw-vault-unlock 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important; z-index: 1 !important; } /* Security perimeter sweep — rotating border accent */ .login-card::before, .auth-card::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1px !important; background: conic-gradient( from var(--gw-border-angle, 0deg), transparent 0%, rgba(56, 189, 248, 0.35) 8%, rgba(16, 185, 129, 0.25) 16%, transparent 24%, transparent 76%, rgba(56, 189, 248, 0.2) 84%, rgba(16, 185, 129, 0.3) 92%, transparent 100% ) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; animation: gw-vault-perimeter 8s linear infinite !important; pointer-events: none !important; z-index: 1 !important; } /* Inner frame — vault door edge effect */ .login-card::after, .auth-card::after { content: '' !important; position: absolute !important; inset: 8px !important; border-radius: 14px !important; border: 1px solid rgba(56, 189, 248, 0.04) !important; pointer-events: none !important; z-index: 0 !important; } /* Register card — slightly different feel, wider */ .register-card { animation: gw-vault-unlock 1s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .register-card::before { background: conic-gradient( from var(--gw-border-angle, 0deg), transparent 0%, rgba(167, 139, 250, 0.3) 8%, rgba(56, 189, 248, 0.2) 16%, transparent 24%, transparent 76%, rgba(167, 139, 250, 0.2) 84%, rgba(56, 189, 248, 0.25) 92%, transparent 100% ) !important; animation: gw-vault-perimeter 10s linear infinite !important; } /* ══════════════════════════════════════════════════ AUTH HEADER — Vault Title ══════════════════════════════════════════════════ */ .login-card h1, .login-card h2, .register-card h1, .register-card h2, .auth-card h1, .auth-header h1 { font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--gw-text) !important; text-shadow: 0 0 40px rgba(56, 189, 248, 0.1) !important; position: relative !important; z-index: 2 !important; } .login-card .subtitle, .auth-subtitle { color: var(--gw-text-secondary) !important; position: relative !important; z-index: 2 !important; } /* Logo/shield on auth — vault insignia glow */ .auth-logo, .login-logo, .auth-shield { filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.2)) !important; transition: filter 0.3s ease !important; } .auth-logo:hover, .login-logo:hover { filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.35)) !important; } /* ══════════════════════════════════════════════════ FORM INPUTS — Vault Terminal Fields Each has a scan-line on focus ══════════════════════════════════════════════════ */ .form-control, .form-input, .form-field input, .form-field textarea, .login-card input[type="text"], .login-card input[type="email"], .login-card input[type="password"], .login-card input, .register-card input[type="text"], .register-card input[type="email"], .register-card input[type="password"], .register-card input, .login-form input, .enhanced-form input, .auth-card input { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(148, 163, 184, 0.12) !important; border-radius: 10px !important; color: #e2e8f0 !important; padding: 0.75rem 1rem !important; font-size: 0.95rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; -webkit-text-fill-color: #e2e8f0 !important; z-index: 2 !important; } /* Focus state — ice-blue glow ring + scan line */ .form-control:focus, .form-input:focus, .form-field input:focus, .login-card input:focus, .register-card input:focus { outline: none !important; border-color: rgba(56, 189, 248, 0.35) !important; background: rgba(15, 23, 42, 0.75) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1), 0 0 20px -4px rgba(56, 189, 248, 0.15), inset 0 0 0 1px rgba(56, 189, 248, 0.05) !important; } /* Scan line animation on focused field's parent */ .form-field:focus-within::after, .form-group:focus-within::after { content: '' !important; position: absolute !important; bottom: 1px !important; left: 0 !important; width: 100% !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent) !important; animation: gw-input-scan 2s ease-in-out infinite !important; pointer-events: none !important; } .form-field, .form-group { position: relative !important; } /* Labels */ .form-label, .form-field label { color: var(--gw-text-secondary) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Chrome Autofill Override — kill the blue/white autofill background */ .login-card input:-webkit-autofill, .login-card input:-webkit-autofill:hover, .login-card input:-webkit-autofill:focus, .login-card input:-webkit-autofill:active, .register-card input:-webkit-autofill, .login-form input:-webkit-autofill, .enhanced-form input:-webkit-autofill, input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px rgba(15, 23, 42, 0.95) inset !important; -webkit-text-fill-color: #e2e8f0 !important; background-color: rgba(15, 23, 42, 0.8) !important; background-clip: content-box !important; caret-color: #e2e8f0 !important; transition: background-color 5000s ease-in-out 0s !important; } /* Placeholder text */ .login-card input::placeholder, .register-card input::placeholder, .login-form input::placeholder, .enhanced-form input::placeholder { color: rgba(148, 163, 184, 0.4) !important; -webkit-text-fill-color: rgba(148, 163, 184, 0.4) !important; } /* ══════════════════════════════════════════════════ AUTH BUTTONS — Vault Access Buttons ══════════════════════════════════════════════════ */ .login-btn, .register-btn, .auth-submit-btn, .auth-card .btn-primary { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; border-radius: 12px !important; color: white !important; font-weight: 700 !important; font-size: 1rem !important; padding: 0.85rem 2rem !important; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; z-index: 2 !important; letter-spacing: 0.02em !important; } .login-btn:hover, .register-btn:hover, .auth-submit-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(16, 185, 129, 0.45), 0 0 60px -10px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* Shimmer sweep on hover */ .login-btn::before, .register-btn::before, .auth-submit-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; transition: left 0.6s ease !important; } .login-btn:hover::before, .register-btn:hover::before { left: 100% !important; } /* Social login / OAuth buttons */ .social-login-btn, .oauth-btn, .btn-social { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 10px !important; color: var(--gw-text-secondary) !important; font-weight: 600 !important; transition: all 0.3s ease !important; position: relative !important; z-index: 2 !important; } .social-login-btn:hover, .oauth-btn:hover { background: rgba(15, 23, 42, 0.8) !important; border-color: rgba(148, 163, 184, 0.2) !important; color: var(--gw-text) !important; transform: translateY(-1px) !important; } /* ══════════════════════════════════════════════════ PLAN SELECTOR — Tier Showcase (Register Page) ══════════════════════════════════════════════════ */ .plan-selector, .plan-options { position: relative !important; z-index: 2 !important; } .plan-option, .plan-card { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 14px !important; padding: 1rem !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; } .plan-option:hover, .plan-card:hover { border-color: rgba(148, 163, 184, 0.15) !important; background: rgba(15, 23, 42, 0.7) !important; transform: translateY(-2px) !important; } /* Selected plan — purple glow */ .plan-option.selected, .plan-option.active, .plan-card.selected, input[type="radio"]:checked + .plan-option, input[type="radio"]:checked + .plan-card { border-color: rgba(167, 139, 250, 0.35) !important; background: rgba(167, 139, 250, 0.06) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.15), 0 8px 32px rgba(167, 139, 250, 0.1), 0 0 60px -15px rgba(167, 139, 250, 0.08) !important; } .plan-option.selected::before, .plan-card.selected::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, var(--gw-accent), transparent) !important; } /* Popular / recommended badge on plan */ .plan-popular, .plan-badge, .recommended-badge { background: linear-gradient(135deg, var(--gw-accent), #c084fc) !important; color: white !important; font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 0.2rem 0.6rem !important; border-radius: 12px !important; } /* Plan price */ .plan-price, .plan-option .price { font-weight: 800 !important; font-size: 1.5rem !important; color: var(--gw-text) !important; } .plan-price .period, .plan-option .period { font-weight: 400 !important; font-size: 0.8rem !important; color: var(--gw-text-secondary) !important; } /* ══════════════════════════════════════════════════ PROGRESS TRACKER — Registration Steps ══════════════════════════════════════════════════ */ .progress-tracker, .registration-steps { position: relative !important; z-index: 2 !important; } .progress-step, .step-item { transition: all 0.3s ease !important; } /* Step circles */ .step-circle, .progress-dot { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 0.8rem !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Default step */ .step-circle { background: rgba(15, 23, 42, 0.6) !important; border: 2px solid rgba(148, 163, 184, 0.15) !important; color: var(--gw-text-secondary) !important; } /* Active step — animated border */ .step-circle.active, .progress-step.active .step-circle { background: rgba(56, 189, 248, 0.1) !important; border-color: rgba(56, 189, 248, 0.5) !important; color: #38bdf8 !important; box-shadow: 0 0 16px rgba(56, 189, 248, 0.2) !important; } /* Completed step — green check */ .step-circle.completed, .progress-step.completed .step-circle { background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.5) !important; color: #10b981 !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important; } /* Step connector line */ .step-connector, .progress-line { background: rgba(148, 163, 184, 0.1) !important; height: 2px !important; flex: 1 !important; transition: background 0.3s ease !important; } .step-connector.completed, .progress-line.completed { background: linear-gradient(90deg, rgba(16, 185, 129, 0.5), rgba(56, 189, 248, 0.3)) !important; } .step-label { font-size: 0.7rem !important; color: var(--gw-text-secondary) !important; font-weight: 500 !important; margin-top: 0.4rem !important; } /* ══════════════════════════════════════════════════ ONBOARDING FLOW — Selection Grid + Review ══════════════════════════════════════════════════ */ .selection-grid, .onboarding-grid { position: relative !important; z-index: 2 !important; } .selection-card, .platform-card, .game-card { background: rgba(15, 23, 42, 0.55) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 12px !important; padding: 0.75rem !important; transition: all 0.3s ease !important; cursor: pointer !important; } .selection-card:hover, .platform-card:hover, .game-card:hover { border-color: rgba(56, 189, 248, 0.2) !important; background: rgba(15, 23, 42, 0.7) !important; transform: translateY(-2px) !important; } .selection-card.selected, .platform-card.selected, .game-card.selected { border-color: rgba(16, 185, 129, 0.35) !important; background: rgba(16, 185, 129, 0.05) !important; box-shadow: 0 0 20px -4px rgba(16, 185, 129, 0.1) !important; } .review-section { background: rgba(15, 23, 42, 0.4) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 12px !important; padding: 1rem !important; } /* ══════════════════════════════════════════════════ AUTH LINKS & MISC ══════════════════════════════════════════════════ */ .auth-link, .login-card a, .register-card a, .forgot-password { color: rgba(56, 189, 248, 0.8) !important; transition: color 0.2s ease !important; text-decoration: none !important; position: relative !important; z-index: 2 !important; } .auth-link:hover, .forgot-password:hover { color: #38bdf8 !important; text-shadow: 0 0 12px rgba(56, 189, 248, 0.2) !important; } /* Divider — "or" line */ .auth-divider, .login-divider { position: relative !important; text-align: center !important; z-index: 2 !important; } .auth-divider::before, .login-divider::before { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 50% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.15), transparent) !important; } /* ══════════════════════════════════════════════════ AUTH INLINE STYLE OVERRIDES ══════════════════════════════════════════════════ */ [style*="background"][class*="login"], [style*="background"][class*="register"], [style*="background"][class*="auth"] { background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.85)) !important; } [style*="background"][class*="plan-option"], [style*="background"][class*="plan-card"] { background: rgba(15, 23, 42, 0.6) !important; } /* ══════════════════════════════════════════════════ AUTH RESPONSIVE ══════════════════════════════════════════════════ */ @media (max-width: 768px) { .login-card, .register-card, .auth-card { border-radius: 16px !important; margin: 1rem !important; } .login-card::before, .auth-card::before { animation-duration: 12s !important; } .plan-option, .plan-card { padding: 0.75rem !important; border-radius: 12px !important; } } @media (max-width: 480px) { .login-card::before, .register-card::before, .auth-card::before { animation: none !important; background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), transparent, rgba(16, 185, 129, 0.1)) !important; -webkit-mask: none !important; mask: none !important; height: 1px !important; top: 0 !important; bottom: auto !important; padding: 0 !important; inset: auto 0 auto 0 !important; } .login-container::before, .register-container::before { width: 300px !important; height: 300px !important; } .step-circle { width: 28px !important; height: 28px !important; font-size: 0.7rem !important; } .step-label { font-size: 0.6rem !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 3: TOOLS — Scan Operations & Results Theater ║ ║ Visual DNA: Scanner HUD + progression + staggered reveals ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════ SCAN CONTAINERS — Primary Tool Interface ══════════════════════════════════════════════════ */ .quick-scan-container, .quick-scan-card, .scan-container, .search-card { background: linear-gradient(155deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.7)) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(56, 189, 248, 0.08) !important; border-radius: 18px !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.04), 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 80px -25px rgba(56, 189, 248, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; position: relative !important; overflow: hidden !important; } /* HUD corner markers — scanner feel */ .quick-scan-card::after { content: '' !important; position: absolute !important; top: 10px !important; left: 10px !important; right: 10px !important; bottom: 10px !important; border-radius: 12px !important; border: 1px solid rgba(56, 189, 248, 0.03) !important; pointer-events: none !important; } /* Scan input field — prominent with glow focus */ .scan-input, .quick-scan-input, .search-input, .scan-container input[type="text"], .scan-container input[type="email"], .scan-container input[type="search"] { background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(56, 189, 248, 0.1) !important; border-radius: 12px !important; color: var(--gw-text) !important; padding: 0.85rem 1.25rem !important; font-size: 1rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .scan-input:focus, .quick-scan-input:focus, .search-input:focus, .scan-container input:focus { outline: none !important; border-color: rgba(56, 189, 248, 0.4) !important; background: rgba(15, 23, 42, 0.85) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12), 0 0 24px -4px rgba(56, 189, 248, 0.15) !important; } /* Scan button — action CTA */ .scan-btn, .quick-scan-btn, .search-btn, .scan-submit { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; border-radius: 12px !important; color: white !important; font-weight: 700 !important; padding: 0.85rem 1.75rem !important; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .scan-btn:hover, .quick-scan-btn:hover, .search-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4), 0 0 50px -10px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* Shimmer on scan button hover */ .scan-btn::before, .quick-scan-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; transition: left 0.5s ease !important; } .scan-btn:hover::before, .quick-scan-btn:hover::before { left: 100% !important; } /* ══════════════════════════════════════════════════ SCAN TABS — Animated Active Indicator ══════════════════════════════════════════════════ */ .scan-tabs, .tool-tabs { background: rgba(15, 23, 42, 0.4) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 14px !important; padding: 4px !important; gap: 2px !important; display: flex !important; } .scan-tab, .tool-tab { background: transparent !important; border: none !important; border-radius: 10px !important; color: var(--gw-text-secondary) !important; font-weight: 600 !important; font-size: 0.85rem !important; padding: 0.6rem 1rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; cursor: pointer !important; } .scan-tab:hover, .tool-tab:hover { color: var(--gw-text) !important; background: rgba(148, 163, 184, 0.06) !important; } /* Active tab — gradient bottom border + glass background */ .scan-tab.active, .scan-tab[aria-selected="true"], .tool-tab.active { background: rgba(15, 23, 42, 0.7) !important; color: var(--gw-text) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; } .scan-tab.active::after, .tool-tab.active::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 20% !important; right: 20% !important; height: 2px !important; background: linear-gradient(90deg, #10b981, var(--gw-accent)) !important; border-radius: 2px !important; } /* ══════════════════════════════════════════════════ SCANNING STATE — Sweep Animation The heartbeat of the tools experience ══════════════════════════════════════════════════ */ .scanning, .loading-state, .scan-loading, .scan-progress { position: relative !important; overflow: hidden !important; } /* Horizontal sweep — scanner beam */ .scanning::before, .loading-state::before, .scan-loading::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.03), rgba(16, 185, 129, 0.06), rgba(56, 189, 248, 0.03), transparent ) !important; animation: gw-scan-sweep 2s ease-in-out infinite !important; pointer-events: none !important; z-index: 1 !important; } /* Scan progress bar */ .scan-progress-bar, .loading-progress { background: rgba(15, 23, 42, 0.5) !important; border-radius: 8px !important; overflow: hidden !important; height: 4px !important; } .scan-progress-fill, .loading-progress-fill { background: linear-gradient(90deg, #10b981, #38bdf8) !important; border-radius: 8px !important; height: 100% !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important; transition: width 0.3s ease !important; } /* Spinner */ .spinner, .scan-spinner, .loading-spinner { border-color: rgba(56, 189, 248, 0.15) !important; border-top-color: #38bdf8 !important; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.3)) !important; } /* Scan status text */ .scan-status, .loading-text { color: var(--gw-text-secondary) !important; font-size: 0.85rem !important; letter-spacing: 0.02em !important; } /* ══════════════════════════════════════════════════ RESULTS — Staggered Reveal + Status Colors ══════════════════════════════════════════════════ */ .results-container, .scan-results, .results-list { position: relative !important; } /* Individual result cards with staggered entry */ .results-card, .result-item, .scan-result { background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.55)) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 14px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; animation: gw-result-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important; } /* Staggered animation delays for result cards */ .results-card:nth-child(1), .result-item:nth-child(1), .scan-result:nth-child(1) { animation-delay: 0.05s !important; } .results-card:nth-child(2), .result-item:nth-child(2), .scan-result:nth-child(2) { animation-delay: 0.12s !important; } .results-card:nth-child(3), .result-item:nth-child(3), .scan-result:nth-child(3) { animation-delay: 0.19s !important; } .results-card:nth-child(4), .result-item:nth-child(4), .scan-result:nth-child(4) { animation-delay: 0.26s !important; } .results-card:nth-child(5), .result-item:nth-child(5), .scan-result:nth-child(5) { animation-delay: 0.33s !important; } .results-card:nth-child(6), .result-item:nth-child(6), .scan-result:nth-child(6) { animation-delay: 0.4s !important; } .results-card:nth-child(7), .result-item:nth-child(7), .scan-result:nth-child(7) { animation-delay: 0.47s !important; } .results-card:nth-child(8), .result-item:nth-child(8), .scan-result:nth-child(8) { animation-delay: 0.54s !important; } /* Result card hover */ .results-card:hover, .result-item:hover, .scan-result:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 40px -10px var(--result-glow, rgba(16, 185, 129, 0.08)), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Status-based left accent + glow for results */ .results-card::before, .result-item::before, .status-card::before, .breach-item::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; border-radius: 3px 0 0 3px !important; background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.1)) !important; transition: all 0.3s ease !important; } /* Danger / breached results — red */ .status-card.danger, .results-card.danger, .result-item.danger, .breach-item.danger, .scan-result.breached, [data-status="danger"] { border-color: rgba(239, 68, 68, 0.15) !important; --result-glow: rgba(239, 68, 68, 0.12) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.06), 0 6px 24px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(239, 68, 68, 0.03) !important; } .status-card.danger::before, .results-card.danger::before, .breach-item.danger::before, .scan-result.breached::before { background: linear-gradient(to bottom, #ef4444, rgba(239, 68, 68, 0.15)) !important; } /* Warning results — orange */ .status-card.warning, .results-card.warning, .result-item.warning, .scan-result.warning { border-color: rgba(249, 115, 22, 0.12) !important; --result-glow: rgba(249, 115, 22, 0.1) !important; } .status-card.warning::before, .results-card.warning::before, .scan-result.warning::before { background: linear-gradient(to bottom, #f97316, rgba(249, 115, 22, 0.12)) !important; } /* Safe / clean results — green */ .status-card.safe, .results-card.safe, .result-item.safe, .scan-result.safe, .no-breaches, [data-status="safe"] { border-color: rgba(16, 185, 129, 0.12) !important; --result-glow: rgba(16, 185, 129, 0.1) !important; } .status-card.safe::before, .results-card.safe::before, .scan-result.safe::before { background: linear-gradient(to bottom, #10b981, rgba(16, 185, 129, 0.1)) !important; } /* ══════════════════════════════════════════════════ RISK SCORE GAUGE — Dramatic SVG-style Display ══════════════════════════════════════════════════ */ .risk-score, .score-gauge, .risk-gauge { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Score circle SVG — animated fill */ .risk-score svg circle, .score-gauge svg circle, .gauge-track { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } .gauge-fill, .score-fill { animation: gw-gauge-fill 2s cubic-bezier(0.4, 0, 0.2, 1) both !important; } /* Score number — dramatic entrance */ .risk-score-value, .score-number, .gauge-value { font-size: 2rem !important; font-weight: 900 !important; font-variant-numeric: tabular-nums !important; animation: gw-score-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both !important; } /* Risk score colors */ .risk-score.critical .risk-score-value, .score-number.critical { color: #ef4444 !important; text-shadow: 0 0 30px rgba(239, 68, 68, 0.3) !important; } .risk-score.high .risk-score-value, .score-number.high { color: #f97316 !important; text-shadow: 0 0 25px rgba(249, 115, 22, 0.25) !important; } .risk-score.medium .risk-score-value, .score-number.medium { color: #f59e0b !important; text-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important; } .risk-score.low .risk-score-value, .score-number.low, .risk-score.safe .risk-score-value { color: #10b981 !important; text-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important; } /* Risk label badge */ .risk-badge, .risk-label { padding: 0.25rem 0.75rem !important; border-radius: 20px !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .risk-badge.critical { background: rgba(239, 68, 68, 0.12) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; } .risk-badge.high { background: rgba(249, 115, 22, 0.1) !important; color: #f97316 !important; border: 1px solid rgba(249, 115, 22, 0.18) !important; } .risk-badge.medium { background: rgba(245, 158, 11, 0.08) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.15) !important; } .risk-badge.low, .risk-badge.safe { background: rgba(16, 185, 129, 0.08) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; } /* ══════════════════════════════════════════════════ BREACH ITEMS — Inline Results ══════════════════════════════════════════════════ */ .breach-item, .inline-breach { background: rgba(15, 23, 42, 0.55) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 12px !important; padding: 0.85rem 1rem !important; margin-bottom: 0.5rem !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; } .breach-item:hover, .inline-breach:hover { background: rgba(15, 23, 42, 0.7) !important; border-color: rgba(148, 163, 184, 0.12) !important; transform: translateX(4px) !important; } /* Breach date/source */ .breach-date, .breach-source { color: var(--gw-text-secondary) !important; font-size: 0.75rem !important; font-variant-numeric: tabular-nums !important; } /* Breach details tag */ .breach-tag, .data-type-tag { background: rgba(56, 189, 248, 0.08) !important; border: 1px solid rgba(56, 189, 248, 0.12) !important; border-radius: 6px !important; padding: 0.15rem 0.5rem !important; font-size: 0.7rem !important; font-weight: 600 !important; color: rgba(56, 189, 248, 0.8) !important; } /* ══════════════════════════════════════════════════ MONITORING SECTION — Persistent Watchers ══════════════════════════════════════════════════ */ .monitoring-section, .monitoring-card, .monitor-panel { background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.55)) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 14px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; } .monitoring-item, .monitor-entry { background: rgba(15, 23, 42, 0.4) !important; border: 1px solid rgba(148, 163, 184, 0.05) !important; border-radius: 10px !important; padding: 0.7rem 0.85rem !important; transition: all 0.25s ease !important; } .monitoring-item:hover, .monitor-entry:hover { background: rgba(15, 23, 42, 0.55) !important; border-color: rgba(16, 185, 129, 0.1) !important; transform: translateY(-1px) !important; } /* Active monitor indicator */ .monitoring-item.active::after, .monitor-entry.active::after { content: '' !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #10b981 !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important; animation: gw-threat-pulse 2s ease-in-out infinite !important; } /* ══════════════════════════════════════════════════ HISTORY — Past Scan Records ══════════════════════════════════════════════════ */ .history-item, .scan-history-entry { background: rgba(15, 23, 42, 0.35) !important; border: 1px solid rgba(148, 163, 184, 0.05) !important; border-radius: 10px !important; padding: 0.65rem 0.85rem !important; margin-bottom: 0.35rem !important; transition: all 0.25s ease !important; } .history-item:hover, .scan-history-entry:hover { background: rgba(15, 23, 42, 0.5) !important; border-color: rgba(148, 163, 184, 0.08) !important; } /* History timestamp */ .history-date, .scan-history-entry .timestamp { color: var(--gw-text-secondary) !important; font-size: 0.75rem !important; font-variant-numeric: tabular-nums !important; } /* ══════════════════════════════════════════════════ EMPTY STATES — Scanner Idle ══════════════════════════════════════════════════ */ .empty-state, .no-results, .no-breaches { text-align: center !important; padding: 2.5rem 1.5rem !important; } .empty-state .icon, .empty-state svg, .no-results .icon { opacity: 0.4 !important; filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.15)) !important; margin-bottom: 1rem !important; } .empty-state h3, .no-results h3, .no-breaches h3 { color: var(--gw-text) !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; } .empty-state p, .no-results p, .no-breaches p { color: var(--gw-text-secondary) !important; font-size: 0.9rem !important; max-width: 400px !important; margin: 0 auto !important; } /* ══════════════════════════════════════════════════ TOOLS INLINE OVERRIDES ══════════════════════════════════════════════════ */ [style*="background"][class*="scan"], [style*="background"][class*="search"], [style*="background"][class*="result"] { background: linear-gradient(145deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.6)) !important; } [style*="border"][class*="scan"], [style*="border"][class*="result"], [style*="border"][class*="breach-item"] { border: 1px solid var(--gw-glass-border) !important; } /* ══════════════════════════════════════════════════ TOOLS RESPONSIVE ══════════════════════════════════════════════════ */ @media (max-width: 768px) { .quick-scan-card, .scan-container, .search-card { border-radius: 14px !important; } .scan-tabs { border-radius: 10px !important; } .results-card, .result-item { border-radius: 10px !important; animation-delay: 0s !important; } .risk-score-value, .score-number { font-size: 1.5rem !important; } } @media (max-width: 480px) { .scanning::before, .loading-state::before { animation-duration: 3s !important; } .results-card, .result-item, .scan-result { animation: none !important; opacity: 1 !important; transform: none !important; } .breach-item, .inline-breach { padding: 0.65rem 0.75rem !important; border-radius: 10px !important; } .scan-btn, .quick-scan-btn { padding: 0.75rem 1.25rem !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 4: FEATURES — Per-Page Color Personalities ║ ║ Each feature page has its own accent, mood, and energy ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════ COLOR PERSONALITY TOKENS — Per-Feature Accent Privacy = ice-blue, Gaming = green, Family = warm amber, Social = purple, Analytics = cyan, Broker = red-orange ══════════════════════════════════════════════════ */ .privacy-dashboard, .privacy-section, [class*="privacy"] .feature-card { --feature-accent: #38bdf8 !important; --feature-accent-rgb: 56, 189, 248 !important; --feature-glow: rgba(56, 189, 248, 0.12) !important; --feature-gradient: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(14, 165, 233, 0.05)) !important; } .gaming-hub, .gaming-section, [class*="gaming"] .feature-card { --feature-accent: #10b981 !important; --feature-accent-rgb: 16, 185, 129 !important; --feature-glow: rgba(16, 185, 129, 0.12) !important; --feature-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05)) !important; } .family-dashboard, .family-section, [class*="family"] .feature-card { --feature-accent: #f59e0b !important; --feature-accent-rgb: 245, 158, 11 !important; --feature-glow: rgba(245, 158, 11, 0.1) !important; --feature-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.04)) !important; } .social-dashboard, .social-section, [class*="social"] .feature-card { --feature-accent: #a78bfa !important; --feature-accent-rgb: 167, 139, 250 !important; --feature-glow: rgba(167, 139, 250, 0.12) !important; --feature-gradient: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.05)) !important; } .analytics-dashboard, .analytics-section, [class*="analytics"] .feature-card { --feature-accent: #06b6d4 !important; --feature-accent-rgb: 6, 182, 212 !important; --feature-glow: rgba(6, 182, 212, 0.12) !important; --feature-gradient: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05)) !important; } .broker-section, [class*="broker"] .feature-card, .broker-removal-card { --feature-accent: #f97316 !important; --feature-accent-rgb: 249, 115, 22 !important; --feature-glow: rgba(249, 115, 22, 0.1) !important; --feature-gradient: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.04)) !important; } /* ══════════════════════════════════════════════════ FEATURE DASHBOARD CONTAINERS — Accent-Aware Glass ══════════════════════════════════════════════════ */ .analytics-dashboard, .privacy-dashboard, .gaming-hub, .family-dashboard, .social-dashboard { background: linear-gradient(145deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.6)) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 18px !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 80px -25px var(--feature-glow, rgba(16, 185, 129, 0.06)), inset 0 1px 0 var(--gw-glass-shine) !important; position: relative !important; overflow: hidden !important; } /* Accent top bar — colored identity strip */ .analytics-dashboard::before, .privacy-dashboard::before, .gaming-hub::before, .family-dashboard::before, .social-dashboard::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, transparent 5%, var(--feature-accent, #10b981) 30%, var(--feature-accent, #10b981) 70%, transparent 95% ) !important; opacity: 0.5 !important; } /* Accent ambient glow behind dashboard */ .analytics-dashboard::after, .privacy-dashboard::after, .gaming-hub::after, .family-dashboard::after, .social-dashboard::after { content: '' !important; position: absolute !important; top: -50px !important; left: 50% !important; transform: translateX(-50%) !important; width: 400px !important; height: 200px !important; background: radial-gradient(ellipse, var(--feature-glow, rgba(16, 185, 129, 0.05)) 0%, transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; } /* ══════════════════════════════════════════════════ FEATURE SECTION HEADERS — Bold with Accent ══════════════════════════════════════════════════ */ .feature-section-header, .feature-title, .dashboard-section-header h2, .analytics-dashboard h2, .privacy-dashboard h2, .gaming-hub h2, .family-dashboard h2, .social-dashboard h2 { font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--gw-text) !important; position: relative !important; z-index: 1 !important; } /* Premium feature headers — gradient text */ .feature-title.premium, .pro-feature-title { background: linear-gradient(135deg, var(--feature-accent, #10b981), var(--gw-accent)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ══════════════════════════════════════════════════ FEATURE CARDS — Accent-Tinted Glass ══════════════════════════════════════════════════ */ .analytics-card, .auto-stat-card, .broker-removal-card, .feature-card, .privacy-card, .gaming-card, .family-card, .social-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.55)) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; } /* Hover — scale + accent glow */ .analytics-card:hover, .auto-stat-card:hover, .broker-removal-card:hover, .feature-card:hover, .privacy-card:hover, .gaming-card:hover, .family-card:hover, .social-card:hover { transform: translateY(-3px) scale(1.01) !important; border-color: rgba(var(--feature-accent-rgb, 16, 185, 129), 0.2) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 40px -10px var(--feature-glow, rgba(16, 185, 129, 0.08)), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Card icon glow — accent colored */ .feature-card .card-icon, .analytics-card .card-icon, .feature-card .icon-wrapper { transition: all 0.3s ease !important; } .feature-card:hover .card-icon, .analytics-card:hover .card-icon, .feature-card:hover .icon-wrapper { filter: drop-shadow(0 0 10px var(--feature-glow, rgba(16, 185, 129, 0.3))) !important; } /* ══════════════════════════════════════════════════ FEATURE GRIDS — Consistent Layouts ══════════════════════════════════════════════════ */ .platform-grid, .analytics-grid, .brokers-grid, .feature-grid { gap: 1.25rem !important; position: relative !important; z-index: 1 !important; } /* ══════════════════════════════════════════════════ STATUS & PRO BADGES — Feature-Specific ══════════════════════════════════════════════════ */ .status-badge { padding: 0.2rem 0.65rem !important; border-radius: 16px !important; font-size: 0.7rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .status-badge.active, .status-badge.protected { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; } .status-badge.inactive, .status-badge.exposed { background: rgba(239, 68, 68, 0.08) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.15) !important; } .status-badge.pending, .status-badge.processing { background: rgba(245, 158, 11, 0.08) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.15) !important; } /* Pro badge — gold shimmer */ .pro-badge, .premium-badge { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08)) !important; border: 1px solid rgba(251, 191, 36, 0.25) !important; color: #fbbf24 !important; padding: 0.2rem 0.6rem !important; border-radius: 14px !important; font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; box-shadow: 0 0 12px rgba(251, 191, 36, 0.1) !important; position: relative !important; overflow: hidden !important; } /* Gold shimmer animation on pro badge */ .pro-badge::before, .premium-badge::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.15), transparent) !important; animation: gw-shimmer 3s ease-in-out infinite !important; } /* ══════════════════════════════════════════════════ PRIVACY-SPECIFIC — Ice Blue Theme ══════════════════════════════════════════════════ */ .privacy-dashboard .stat-value, .privacy-section .highlight { color: #38bdf8 !important; text-shadow: 0 0 20px rgba(56, 189, 248, 0.2) !important; } .privacy-dashboard .progress-fill { background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important; box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important; } /* ══════════════════════════════════════════════════ GAMING-SPECIFIC — Green Energy Theme ══════════════════════════════════════════════════ */ .gaming-hub .stat-value, .gaming-section .highlight { color: #10b981 !important; text-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important; } .gaming-hub .progress-fill { background: linear-gradient(90deg, #10b981, #34d399) !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important; } /* Gaming platform icons — green glow on hover */ .gaming-hub .platform-icon:hover, .gaming-section .game-icon:hover { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4)) !important; } /* ══════════════════════════════════════════════════ FAMILY-SPECIFIC — Warm Amber Theme ══════════════════════════════════════════════════ */ .family-dashboard .stat-value, .family-section .highlight { color: #f59e0b !important; text-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important; } .family-dashboard .progress-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important; } /* Family member cards — warmer glass */ .family-member-card, .family-card .member { background: linear-gradient(145deg, rgba(245, 158, 11, 0.04), rgba(15, 23, 42, 0.65)) !important; border-color: rgba(245, 158, 11, 0.1) !important; } /* ══════════════════════════════════════════════════ SOCIAL-SPECIFIC — Purple Creativity Theme ══════════════════════════════════════════════════ */ .social-dashboard .stat-value, .social-section .highlight { color: #a78bfa !important; text-shadow: 0 0 20px rgba(167, 139, 250, 0.2) !important; } .social-dashboard .progress-fill { background: linear-gradient(90deg, #a78bfa, #c084fc) !important; box-shadow: 0 0 10px rgba(167, 139, 250, 0.3) !important; } /* ══════════════════════════════════════════════════ ANALYTICS-SPECIFIC — Cyan Data Theme ══════════════════════════════════════════════════ */ .analytics-dashboard .stat-value, .analytics-section .highlight { color: #06b6d4 !important; text-shadow: 0 0 20px rgba(6, 182, 212, 0.2) !important; } .analytics-dashboard .progress-fill { background: linear-gradient(90deg, #06b6d4, #22d3ee) !important; box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) !important; } /* Analytics chart containers — enhanced glass */ .chart-container, .analytics-chart { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(6, 182, 212, 0.08) !important; border-radius: 12px !important; padding: 1rem !important; } /* ══════════════════════════════════════════════════ BROKER REMOVAL — Red-Orange Urgency ══════════════════════════════════════════════════ */ .broker-removal-card { border-color: rgba(249, 115, 22, 0.1) !important; } .broker-removal-card:hover { border-color: rgba(249, 115, 22, 0.2) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 40px -10px rgba(249, 115, 22, 0.08) !important; } .broker-removal-card .broker-status { font-weight: 700 !important; } .broker-removal-card .broker-status.removed { color: #10b981 !important; } .broker-removal-card .broker-status.pending { color: #f59e0b !important; } .broker-removal-card .broker-status.found { color: #f97316 !important; } /* ══════════════════════════════════════════════════ FEATURE PAGE SECTIONS — General Pattern ══════════════════════════════════════════════════ */ .feature-section, .feature-panel { background: linear-gradient(145deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.45)) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Feature stat values — use accent color */ .feature-stat-value, .feature-number { font-weight: 800 !important; font-variant-numeric: tabular-nums !important; color: var(--feature-accent, var(--gw-text)) !important; } /* Feature CTA buttons — accent-colored */ .feature-cta, .feature-action-btn { background: linear-gradient(135deg, var(--feature-accent, #10b981), rgba(var(--feature-accent-rgb, 16, 185, 129), 0.8)) !important; border: none !important; border-radius: 10px !important; color: white !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(var(--feature-accent-rgb, 16, 185, 129), 0.25) !important; transition: all 0.3s ease !important; } .feature-cta:hover, .feature-action-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(var(--feature-accent-rgb, 16, 185, 129), 0.35) !important; } /* ══════════════════════════════════════════════════ FEATURE INLINE OVERRIDES ══════════════════════════════════════════════════ */ [style*="background"][class*="analytics"], [style*="background"][class*="privacy"], [style*="background"][class*="gaming"], [style*="background"][class*="family"], [style*="background"][class*="social"] { background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.55)) !important; } /* ══════════════════════════════════════════════════ FEATURE RESPONSIVE ══════════════════════════════════════════════════ */ @media (max-width: 768px) { .analytics-dashboard, .privacy-dashboard, .gaming-hub, .family-dashboard, .social-dashboard { border-radius: 14px !important; } .analytics-dashboard::after, .privacy-dashboard::after, .gaming-hub::after, .family-dashboard::after, .social-dashboard::after { width: 250px !important; height: 120px !important; } .analytics-card, .feature-card, .broker-removal-card { border-radius: 10px !important; } } @media (max-width: 480px) { .analytics-dashboard::before, .privacy-dashboard::before, .gaming-hub::before, .family-dashboard::before, .social-dashboard::before { height: 2px !important; } .analytics-dashboard::after, .privacy-dashboard::after, .gaming-hub::after, .family-dashboard::after, .social-dashboard::after { display: none !important; } .feature-card:hover, .analytics-card:hover { transform: translateY(-2px) !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 5: POLISH — Error Pages, Modals, Alerts, Misc ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Error Pages ── */ .error-container, .maintenance-container { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh !important; text-align: center !important; } .error-card, .maintenance-card { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-xl) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--gw-glass-shine) !important; padding: 2.5rem !important; max-width: 480px !important; } .error-card h1, .maintenance-card h1 { font-weight: 800 !important; color: var(--gw-text) !important; letter-spacing: -0.03em !important; } .error-card p, .maintenance-card p { color: var(--gw-text-secondary) !important; } /* ── Generic Modals & Overlays ── */ .modal-overlay, .modal-backdrop, [class*="overlay"].active { background: rgba(6, 10, 19, 0.85) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .modal, .modal-content, .modal-dialog { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-xl) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 32px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--gw-glass-shine) !important; } /* ── Toast Notifications ── */ .toast, .notification, [class*="toast"] { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 12px !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important; } /* ── Tooltips ── */ .tooltip, [class*="tooltip"] { background: rgba(12, 18, 32, 0.95) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 10px !important; backdrop-filter: blur(16px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; font-size: 0.82rem !important; color: var(--gw-text) !important; } /* ── Dropdown Menus (generic) ── */ .dropdown-menu, [class*="dropdown-content"] { background: rgba(12, 18, 32, 0.95) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius) !important; backdrop-filter: blur(24px) saturate(150%) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--gw-glass-shine) !important; } .dropdown-menu a, [class*="dropdown-content"] a { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--gw-text-secondary) !important; transition: all 0.15s ease !important; padding: 0.5rem 0.75rem !important; } .dropdown-menu a:hover, [class*="dropdown-content"] a:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--gw-text) !important; } /* ── Generic Alert Boxes ── */ .alert-success, [class*="alert-success"] { background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; border-radius: 12px !important; color: #34d399 !important; } .alert-danger, .alert-error, [class*="alert-danger"] { background: rgba(239, 68, 68, 0.08) !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; border-radius: 12px !important; color: #f87171 !important; } .alert-warning, [class*="alert-warning"] { background: rgba(251, 191, 36, 0.08) !important; border: 1px solid rgba(251, 191, 36, 0.2) !important; border-radius: 12px !important; color: #fbbf24 !important; } .alert-info, [class*="alert-info"] { background: rgba(56, 189, 248, 0.08) !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; border-radius: 12px !important; color: #38bdf8 !important; } /* ── Flash Messages ── */ .flash-messages .flash-message, .flashes li { border-radius: 12px !important; backdrop-filter: blur(8px) !important; padding: 0.75rem 1rem !important; font-size: 0.88rem !important; } /* ── Tables ── */ table, .data-table { border-collapse: separate !important; border-spacing: 0 !important; border-radius: var(--gw-radius) !important; overflow: hidden !important; } table thead th { background: rgba(15, 23, 42, 0.6) !important; font-weight: 700 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--gw-text-secondary) !important; border-bottom: 1px solid var(--gw-glass-border) !important; } table tbody td { border-bottom: 1px solid var(--gw-glass-border) !important; font-size: 0.85rem !important; color: var(--gw-text) !important; } table tbody tr:hover { background: rgba(255, 255, 255, 0.02) !important; } /* ── Pagination ── */ .pagination { gap: 0.25rem !important; } .pagination a, .pagination span { border-radius: 8px !important; padding: 0.4rem 0.7rem !important; font-size: 0.82rem !important; font-weight: 600 !important; transition: all 0.2s ease !important; } .pagination .active { background: var(--gw-primary) !important; color: white !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important; } /* ── Gate Overlay (Premium Feature Lock) ── */ .gw-gate-overlay { background: rgba(6, 10, 19, 0.85) !important; backdrop-filter: blur(8px) !important; border-radius: var(--gw-radius) !important; } .gw-gate-overlay a, .gw-gate-overlay button { background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; color: white !important; box-shadow: 0 0 16px rgba(167, 139, 250, 0.25) !important; } /* ── Blog Cards ── */ .blog-card, .article-card { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; backdrop-filter: blur(12px) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 4px 24px rgba(0, 0, 0, 0.2) !important; transition: all 0.3s ease !important; overflow: hidden !important; } .blog-card:hover, .article-card:hover { border-color: var(--gw-border-hover) !important; transform: translateY(-3px) !important; } /* ── Settings Pages ── */ .settings-container, .account-container, .profile-container { max-width: 800px !important; } .settings-card, .profile-card, .account-card { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--gw-glass-shine) !important; } /* Settings sidebar */ .settings-sidebar, .account-sidebar { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; backdrop-filter: blur(12px) !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 4px 20px rgba(0, 0, 0, 0.2) !important; } .settings-sidebar a, .account-sidebar a { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--gw-text-secondary) !important; padding: 0.6rem 1rem !important; border-radius: 10px !important; transition: all 0.2s ease !important; } .settings-sidebar a:hover, .account-sidebar a:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--gw-text) !important; } .settings-sidebar a.active, .account-sidebar a.active { background: rgba(16, 185, 129, 0.08) !important; color: var(--gw-primary) !important; font-weight: 600 !important; } /* ── Mobile Bottom Nav ── */ .gw-mobile-bottom-nav { background: rgba(6, 10, 19, 0.95) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-top: 1px solid var(--gw-glass-border) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important; } .gw-mobile-bottom-nav a { font-size: 0.68rem !important; font-weight: 600 !important; color: var(--gw-text-dim) !important; transition: color 0.2s ease !important; } .gw-mobile-bottom-nav a.active { color: var(--gw-primary) !important; } /* ── Command Center Floating Widget ── */ .cc-floating-widget, [class*="floating-widget"] { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 16px !important; backdrop-filter: blur(20px) saturate(150%) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--gw-glass-shine) !important; } /* ── Generic Link / Anchor Premium ── */ a { transition: color 0.2s ease !important; } /* ── Global Button Enhancements ── */ button, [type="submit"], [type="button"] { font-family: 'Inter', -apple-system, sans-serif !important; cursor: pointer !important; } /* ── Select Inputs ── */ select { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 10px !important; color: var(--gw-text) !important; font-size: 0.88rem !important; padding: 0.6rem 0.8rem !important; transition: border-color 0.2s ease !important; } select:focus { border-color: rgba(56, 189, 248, 0.3) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1) !important; } /* ── Textarea ── */ textarea { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 12px !important; color: var(--gw-text) !important; font-size: 0.9rem !important; font-family: 'Inter', -apple-system, sans-serif !important; padding: 0.75rem 1rem !important; transition: border-color 0.2s ease !important; } textarea:focus { border-color: rgba(56, 189, 248, 0.3) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 6: VEIL CONSOLE — Purple Anti-Doxx Theater ║ ║ Visual DNA: Terminal console + purple neon + AI conversation ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Veil Container — Full-bleed dark with subtle purple ambient ── */ .veil-container { position: relative !important; z-index: 1 !important; } .veil-container::before { content: '' !important; position: fixed !important; top: 30% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 700px !important; height: 700px !important; background: radial-gradient(circle, rgba(167, 139, 250, 0.04) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; } /* ── Veil Header — Premium gradient title ── */ .veil-title { font-family: 'Orbitron', 'Exo 2', sans-serif !important; text-shadow: 0 0 60px rgba(167, 139, 250, 0.3) !important; } .veil-subtitle { color: var(--gw-text-secondary) !important; font-size: 1rem !important; } /* ── Commander Badge — Gold glow refinement ── */ .commander-badge { background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; box-shadow: 0 0 20px rgba(251, 191, 36, 0.15) !important; font-family: 'Rajdhani', 'Exo 2', sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 20px !important; padding: 0.4rem 1rem !important; font-size: 0.78rem !important; } /* ── Rate Limit Banner — Glass pill ── */ .rate-limit-banner { background: var(--gw-glass) !important; border: 1px solid rgba(167, 139, 250, 0.15) !important; border-radius: 14px !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; } .rate-limit-bar { background: rgba(15, 23, 42, 0.5) !important; border-radius: 6px !important; overflow: hidden !important; } .rate-limit-fill { background: linear-gradient(90deg, var(--gw-accent), #c084fc) !important; border-radius: 6px !important; box-shadow: 0 0 10px rgba(167, 139, 250, 0.4) !important; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ── Veil Console — Premium glass terminal ── */ .veil-console { background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.82)) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; border: 1px solid rgba(167, 139, 250, 0.1) !important; border-radius: 18px !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.05), 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 100px -30px rgba(167, 139, 250, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; overflow: hidden !important; position: relative !important; } /* Console header — terminal chrome with purple accent */ .console-header { background: rgba(15, 23, 42, 0.7) !important; border-bottom: 1px solid rgba(167, 139, 250, 0.08) !important; padding: 0.6rem 1rem !important; display: flex !important; align-items: center !important; } .console-dots span { width: 10px !important; height: 10px !important; border-radius: 50% !important; display: inline-block !important; margin-right: 6px !important; } .console-dots span:nth-child(1) { background: #ef4444 !important; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4) !important; } .console-dots span:nth-child(2) { background: #f59e0b !important; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4) !important; } .console-dots span:nth-child(3) { background: #10b981 !important; box-shadow: 0 0 6px rgba(16, 185, 129, 0.4) !important; } .console-body { padding: 1.5rem !important; position: relative !important; } /* ── Chat Messages — Conversation bubbles ── */ .chat-messages { position: relative !important; } .chat-message { border-radius: 14px !important; padding: 0.85rem 1rem !important; margin-bottom: 0.75rem !important; animation: gw-fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important; position: relative !important; } /* AI response messages — glass with purple tint */ .chat-message.ai, .chat-message.assistant, .welcome-message { background: linear-gradient(145deg, rgba(167, 139, 250, 0.06), rgba(15, 23, 42, 0.7)) !important; border: 1px solid rgba(167, 139, 250, 0.1) !important; border-radius: 14px 14px 14px 4px !important; } /* User messages — neutral glass */ .chat-message.user { background: linear-gradient(145deg, rgba(56, 189, 248, 0.06), rgba(15, 23, 42, 0.55)) !important; border: 1px solid rgba(56, 189, 248, 0.08) !important; border-radius: 14px 14px 4px 14px !important; margin-left: auto !important; } /* ── Mode Toggle — Segmented control ── */ .mode-toggle-wrapper { position: relative !important; z-index: 2 !important; } .mode-toggle { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 12px !important; padding: 3px !important; display: inline-flex !important; } .mode-label { padding: 0.5rem 1rem !important; border-radius: 10px !important; font-weight: 600 !important; font-size: 0.82rem !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; color: var(--gw-text-secondary) !important; } .mode-label.active, .mode-label:not(.inactive) { color: var(--gw-text) !important; } .mode-label.general:not(.inactive) { background: rgba(167, 139, 250, 0.12) !important; box-shadow: 0 2px 8px rgba(167, 139, 250, 0.15) !important; } .mode-label.asset:not(.inactive) { background: rgba(56, 189, 248, 0.12) !important; box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15) !important; } /* ── Session Stats — Small glass pills ── */ .session-stats { display: flex !important; gap: 0.5rem !important; } .session-stat { background: rgba(15, 23, 42, 0.45) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 8px !important; padding: 0.35rem 0.65rem !important; font-size: 0.78rem !important; } .session-stat-value { color: var(--gw-accent) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; } /* ── Veil Input — Chat input field ── */ .veil-input, .chat-input, .console-input { background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(167, 139, 250, 0.12) !important; border-radius: 12px !important; color: var(--gw-text) !important; padding: 0.85rem 1.25rem !important; font-size: 0.95rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .veil-input:focus, .chat-input:focus, .console-input:focus { outline: none !important; border-color: rgba(167, 139, 250, 0.4) !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1), 0 0 20px -4px rgba(167, 139, 250, 0.15) !important; } /* ── Quick Tips — Glass cards ── */ .quick-tip, .mode-guide .tip { background: rgba(15, 23, 42, 0.4) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 10px !important; padding: 0.6rem 0.85rem !important; transition: all 0.25s ease !important; cursor: pointer !important; } .quick-tip:hover, .mode-guide .tip:hover { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(167, 139, 250, 0.15) !important; transform: translateY(-1px) !important; } /* ── Veil Status Indicator ── */ .status-indicator { width: 8px !important; height: 8px !important; border-radius: 50% !important; display: inline-block !important; } .status-indicator.online, .status-indicator.active { background: #10b981 !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important; animation: gw-threat-pulse 2s ease-in-out infinite !important; } /* ── Veil Responsive ── */ @media (max-width: 768px) { .veil-console { border-radius: 14px !important; } .veil-title { font-size: 2rem !important; } .chat-message { padding: 0.7rem 0.85rem !important; } } @media (max-width: 480px) { .veil-container::before { width: 350px !important; height: 350px !important; } .veil-console { border-radius: 12px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .mode-toggle { width: 100% !important; } .mode-label { flex: 1 !important; text-align: center !important; font-size: 0.75rem !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 7: ASSET SHIELD — Ice-Blue Security Dashboard ║ ║ Visual DNA: Score rings + risk cards + monitoring HUD ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Asset Shield Container ── */ .asd-container { position: relative !important; z-index: 1 !important; } /* ── ASD Header — Title + Tier Badge Row ── */ .asd-header { position: relative !important; z-index: 1 !important; } .asd-title { font-family: 'Orbitron', 'Exo 2', sans-serif !important; font-weight: 800 !important; color: var(--gw-text) !important; letter-spacing: -0.02em !important; text-shadow: 0 0 40px rgba(56, 189, 248, 0.15) !important; } .asd-tier-badge { border-radius: 20px !important; padding: 0.25rem 0.75rem !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } /* ── Score Card — The Centerpiece Ring ── */ .asd-score-card { background: linear-gradient(160deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.72)) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; border: 1px solid rgba(56, 189, 248, 0.1) !important; border-radius: 20px !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.05), 0 16px 56px rgba(0, 0, 0, 0.4), 0 0 100px -30px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; position: relative !important; overflow: hidden !important; } /* Score circle — SVG ring glow */ .asd-score-circle { position: relative !important; } .asd-score-circle svg circle { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } .asd-score-value { font-size: 2.5rem !important; font-weight: 900 !important; font-variant-numeric: tabular-nums !important; animation: gw-score-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important; } .asd-score-value.score-secure { color: #10b981 !important; text-shadow: 0 0 30px rgba(16, 185, 129, 0.3) !important; } .asd-score-value.score-medium { color: #f59e0b !important; text-shadow: 0 0 30px rgba(245, 158, 11, 0.25) !important; } .asd-score-value.score-high { color: #f97316 !important; text-shadow: 0 0 30px rgba(249, 115, 22, 0.3) !important; } .asd-score-value.score-critical { color: #ef4444 !important; text-shadow: 0 0 30px rgba(239, 68, 68, 0.35) !important; } .asd-score-value.score-low { color: #38bdf8 !important; text-shadow: 0 0 25px rgba(56, 189, 248, 0.25) !important; } .asd-score-label { color: var(--gw-text-secondary) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } /* ── ASD Sections — Glass panels with ice-blue tint ── */ .asd-section { background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.55)) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; overflow: hidden !important; position: relative !important; } .asd-section-header { border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important; padding: 1rem 1.25rem !important; } .asd-section-header h3 { font-weight: 700 !important; color: var(--gw-text) !important; font-size: 0.95rem !important; } /* ── Asset Detail Cards (aad-) — Individual asset view ── */ .aad-container { position: relative !important; z-index: 1 !important; } .aad-header { position: relative !important; } .aad-platform { font-weight: 700 !important; color: var(--gw-text) !important; } /* Health Card — green/red accent based on status */ .aad-health-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.6)) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 14px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; transition: all 0.3s ease !important; } .aad-health-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px -8px rgba(56, 189, 248, 0.08), inset 0 1px 0 var(--gw-glass-shine) !important; } /* ── Risk Items — Severity-coded left accent ── */ .aad-risk-list { position: relative !important; } .aad-risk-item { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 12px !important; padding: 0.75rem 1rem !important; margin-bottom: 0.5rem !important; transition: all 0.25s ease !important; position: relative !important; overflow: hidden !important; } .aad-risk-item::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; border-radius: 3px 0 0 3px !important; background: rgba(148, 163, 184, 0.2) !important; } .aad-risk-item:hover { background: rgba(15, 23, 42, 0.65) !important; border-color: rgba(148, 163, 184, 0.1) !important; transform: translateX(3px) !important; } /* Risk severity colors */ .aad-risk-item.critical::before, .aad-risk-badge.critical { background: linear-gradient(to bottom, #ef4444, rgba(239, 68, 68, 0.2)) !important; } .aad-risk-item.high::before, .aad-risk-badge.high { background: linear-gradient(to bottom, #f97316, rgba(249, 115, 22, 0.2)) !important; } .aad-risk-item.medium::before, .aad-risk-badge.medium { background: linear-gradient(to bottom, #f59e0b, rgba(245, 158, 11, 0.2)) !important; } .aad-risk-badge { padding: 0.2rem 0.6rem !important; border-radius: 16px !important; font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .aad-risk-badge.critical { background: rgba(239, 68, 68, 0.12) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; } .aad-risk-badge.high { background: rgba(249, 115, 22, 0.1) !important; color: #f97316 !important; border: 1px solid rgba(249, 115, 22, 0.18) !important; } .aad-risk-badge.medium { background: rgba(245, 158, 11, 0.08) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.15) !important; } /* ── Monitoring Badges — Tier-coded ── */ .aad-monitoring-badge { border-radius: 20px !important; padding: 0.25rem 0.75rem !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .aad-monitoring-badge.weekly { background: rgba(148, 163, 184, 0.08) !important; color: var(--gw-text-secondary) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; } .aad-monitoring-badge.daily { background: rgba(56, 189, 248, 0.08) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; } .aad-monitoring-badge.super { background: rgba(251, 191, 36, 0.1) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.25) !important; box-shadow: 0 0 12px rgba(251, 191, 36, 0.1) !important; } /* ── Presence Grid — Platform detection badges ── */ .aad-presence-grid { gap: 0.5rem !important; } .aad-presence-badge { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 10px !important; padding: 0.5rem 0.75rem !important; transition: all 0.25s ease !important; font-size: 0.82rem !important; } .aad-presence-badge:hover { background: rgba(15, 23, 42, 0.7) !important; border-color: rgba(56, 189, 248, 0.12) !important; transform: translateY(-1px) !important; } /* ── Mission Stats Ring — Progress indicator ── */ .aad-mission-stats { position: relative !important; } .aad-mission-ring { position: relative !important; } .aad-mission-ring svg circle { transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1) !important; } .aad-mission-progress { font-weight: 800 !important; font-variant-numeric: tabular-nums !important; color: var(--gw-text) !important; } /* ── ASD Action Buttons — Ice-blue CTA ── */ .aad-action-btn { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; border: none !important; border-radius: 10px !important; color: white !important; font-weight: 700 !important; padding: 0.65rem 1.25rem !important; box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; } .aad-action-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(56, 189, 248, 0.4), 0 0 40px -10px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .aad-action-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important; transition: left 0.5s ease !important; } .aad-action-btn:hover::before { left: 100% !important; } /* ── ASD Back Link ── */ .aad-back { color: rgba(56, 189, 248, 0.7) !important; font-weight: 600 !important; font-size: 0.85rem !important; transition: color 0.2s ease !important; text-decoration: none !important; } .aad-back:hover { color: #38bdf8 !important; text-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important; } /* ── Asset Shield Teaser — Purple upgrade prompt ── */ .asd-teaser, .asset-shield-teaser { background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8)) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(167, 139, 250, 0.15) !important; border-radius: var(--gw-radius-lg) !important; box-shadow: 0 0 40px -10px rgba(167, 139, 250, 0.1) !important; } /* ── Asset Shield Responsive ── */ @media (max-width: 768px) { .asd-score-card { border-radius: 16px !important; } .asd-section { border-radius: 12px !important; } .asd-score-value { font-size: 2rem !important; } } @media (max-width: 480px) { .asd-score-card { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .aad-risk-item { padding: 0.6rem 0.75rem !important; } .aad-action-btn { width: 100% !important; text-align: center !important; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 8: HUB PAGES — Feature Hub Navigation & Cards ║ ║ Visual DNA: Unified hub nav + alert banners + stat pills ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Hub Navigation — Feature page sidebar/tab nav ── */ .hub-nav { background: rgba(15, 23, 42, 0.45) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 14px !important; padding: 4px !important; display: flex !important; gap: 2px !important; } .hub-nav-item { background: transparent !important; border: none !important; border-radius: 10px !important; color: var(--gw-text-secondary) !important; font-weight: 600 !important; font-size: 0.82rem !important; padding: 0.55rem 0.85rem !important; transition: all 0.3s ease !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 0.4rem !important; } .hub-nav-item:hover { color: var(--gw-text) !important; background: rgba(148, 163, 184, 0.06) !important; } .hub-nav-item.active { background: rgba(15, 23, 42, 0.7) !important; color: var(--gw-text) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; } .hub-nav-item.active::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 20% !important; right: 20% !important; height: 2px !important; background: linear-gradient(90deg, var(--feature-accent, #10b981), var(--gw-accent)) !important; border-radius: 2px !important; } .hub-nav-icon { font-size: 1rem !important; transition: all 0.3s ease !important; } .hub-nav-item.active .hub-nav-icon { filter: drop-shadow(0 0 6px var(--feature-glow, rgba(16, 185, 129, 0.3))) !important; } /* ── Hub Alert Banners — Glass with severity ── */ .hub-alert, .hub-alert-banner { background: var(--gw-glass) !important; border-radius: 12px !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; padding: 0.75rem 1rem !important; position: relative !important; overflow: hidden !important; } .hub-alert.danger, .hub-alert-banner.danger { border: 1px solid rgba(239, 68, 68, 0.2) !important; background: rgba(239, 68, 68, 0.06) !important; } .hub-alert.danger::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 3px !important; height: 100% !important; background: #ef4444 !important; } .hub-alert.info, .hub-alert-banner.info { border: 1px solid rgba(56, 189, 248, 0.15) !important; background: rgba(56, 189, 248, 0.04) !important; } .hub-alert.info::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 3px !important; height: 100% !important; background: #38bdf8 !important; } /* ── Hub Stats — Small metric pills ── */ .hub-stat { background: rgba(15, 23, 42, 0.45) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 10px !important; padding: 0.5rem 0.75rem !important; font-variant-numeric: tabular-nums !important; transition: all 0.25s ease !important; } .hub-stat:hover { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(148, 163, 184, 0.1) !important; } .hub-stat .value { font-weight: 800 !important; color: var(--feature-accent, var(--gw-text)) !important; } .hub-stat .label { font-size: 0.72rem !important; color: var(--gw-text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } /* ── Hub Header — Section title bar ── */ .hub-header { display: flex !important; align-items: center !important; gap: 0.75rem !important; position: relative !important; z-index: 1 !important; } .hub-header h1, .hub-header h2 { font-weight: 800 !important; color: var(--gw-text) !important; letter-spacing: -0.02em !important; } /* ── Legal Pages — Clean glass cards ── */ .legal-container, .legal-content { max-width: 800px !important; position: relative !important; z-index: 1 !important; } .legal-section { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: var(--gw-radius-lg) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 var(--gw-glass-shine) !important; padding: 1.5rem !important; margin-bottom: 1.25rem !important; } .legal-section h2, .legal-section h3 { font-weight: 700 !important; color: var(--gw-text) !important; margin-bottom: 0.75rem !important; } .legal-section p, .legal-section li { color: var(--gw-text-secondary) !important; font-size: 0.9rem !important; line-height: 1.7 !important; } /* ── Error Page Enhancements — Terminal chrome + dramatic codes ── */ .error-code { font-family: 'Orbitron', 'Exo 2', monospace !important; font-size: 5rem !important; font-weight: 900 !important; color: var(--gw-text) !important; text-shadow: 0 0 60px rgba(56, 189, 248, 0.15), 0 0 120px rgba(56, 189, 248, 0.05) !important; line-height: 1 !important; } .error-title { font-weight: 800 !important; color: var(--gw-text) !important; letter-spacing: -0.02em !important; } .error-message { color: var(--gw-text-secondary) !important; max-width: 400px !important; margin: 0 auto !important; font-size: 0.95rem !important; line-height: 1.6 !important; } .error-actions { display: flex !important; gap: 0.75rem !important; justify-content: center !important; flex-wrap: wrap !important; } .error-actions a, .error-actions button { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; border-radius: 10px !important; color: white !important; font-weight: 700 !important; padding: 0.7rem 1.5rem !important; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important; transition: all 0.3s ease !important; text-decoration: none !important; } .error-actions a:hover, .error-actions button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important; } /* Diagnostic readout — terminal-style data */ .diagnostic-readout { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 12px !important; padding: 1rem !important; font-family: 'JetBrains Mono', 'Fira Code', monospace !important; font-size: 0.78rem !important; } .diagnostic-item { display: flex !important; justify-content: space-between !important; padding: 0.3rem 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.04) !important; } .diagnostic-label { color: var(--gw-text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .diagnostic-value { color: var(--gw-text) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; } /* Alert header — pulsing threat indicator */ .alert-header { background: rgba(239, 68, 68, 0.06) !important; border: 1px solid rgba(239, 68, 68, 0.15) !important; border-radius: 10px !important; padding: 0.5rem 1rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } .alert-indicator { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ef4444 !important; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5) !important; animation: gw-threat-pulse 2s ease-in-out infinite !important; } .alert-text { color: #f87171 !important; font-weight: 600 !important; font-size: 0.82rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } /* Terminal header — error page terminal chrome */ .terminal-header { background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 10px 10px 0 0 !important; padding: 0.5rem 1rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } .terminal-controls span { width: 10px !important; height: 10px !important; border-radius: 50% !important; display: inline-block !important; margin-right: 5px !important; } /* Corner brackets — decorative framing */ .corner-bracket { position: absolute !important; width: 20px !important; height: 20px !important; border-color: rgba(56, 189, 248, 0.15) !important; border-style: solid !important; border-width: 0 !important; } .corner-bracket.tl { top: 0; left: 0; border-top-width: 2px !important; border-left-width: 2px !important; } .corner-bracket.tr { top: 0; right: 0; border-top-width: 2px !important; border-right-width: 2px !important; } .corner-bracket.bl { bottom: 0; left: 0; border-bottom-width: 2px !important; border-left-width: 2px !important; } .corner-bracket.br { bottom: 0; right: 0; border-bottom-width: 2px !important; border-right-width: 2px !important; } /* System footer — status row */ .system-footer { display: flex !important; justify-content: center !important; gap: 1.5rem !important; padding: 1rem !important; } .footer-stat { font-size: 0.72rem !important; color: var(--gw-text-secondary) !important; display: flex !important; align-items: center !important; gap: 0.35rem !important; font-variant-numeric: tabular-nums !important; } .footer-stat .indicator { width: 6px !important; height: 6px !important; border-radius: 50% !important; } .footer-stat .indicator.online { background: #10b981 !important; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important; } .footer-stat .indicator.warning { background: #f59e0b !important; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important; } .footer-stat .indicator.error { background: #ef4444 !important; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important; } /* ── Suggestions on error pages ── */ .suggestions { background: rgba(15, 23, 42, 0.4) !important; border: 1px solid rgba(148, 163, 184, 0.06) !important; border-radius: 12px !important; padding: 1rem !important; } .suggestions h3 { color: var(--gw-text) !important; font-weight: 700 !important; font-size: 0.88rem !important; margin-bottom: 0.5rem !important; } .suggestions-links a { color: rgba(56, 189, 248, 0.8) !important; text-decoration: none !important; font-weight: 500 !important; transition: color 0.2s ease !important; } .suggestions-links a:hover { color: #38bdf8 !important; text-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PHASE 9: UPGRADE PAGE — Cosmic Tier Showcase ║ ║ Visual DNA: Plan cards with tier glow + comparison theater ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Upgrade Container ── */ .upgrade-container { position: relative !important; z-index: 1 !important; } /* ── Upgrade Hero ── */ .upgrade-hero { text-align: center !important; position: relative !important; } .upgrade-hero h1 { font-weight: 900 !important; letter-spacing: -0.03em !important; } /* ── Current Tier Box — Highlighted status ── */ .current-tier-box { background: var(--gw-glass) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 14px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 1rem !important; text-align: center !important; } .current-tier-box .tier.explorer { color: var(--gw-text-secondary) !important; } .current-tier-box .tier.pro, .current-tier-box .tier.commander { color: var(--gw-accent) !important; text-shadow: 0 0 15px rgba(167, 139, 250, 0.2) !important; } .current-tier-box .tier.elite { color: #fbbf24 !important; text-shadow: 0 0 15px rgba(251, 191, 36, 0.2) !important; } /* ── Plans Grid — Tier cards ── */ .plans-grid { gap: 1.25rem !important; position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; } @media (max-width: 768px) { .plans-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .plan-card-cosmic { width: 100% !important; } } /* Plan card — Enhanced per-tier glow */ .plan-card-cosmic { background: linear-gradient(160deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.75)) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid var(--gw-glass-border) !important; border-radius: 18px !important; box-shadow: 0 0 0 1px var(--gw-glass-shine), 0 12px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--gw-glass-shine) !important; position: relative !important; overflow: hidden !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } .plan-card-cosmic:hover { transform: translateY(-6px) !important; } /* Per-tier card glow on hover */ .plan-card-cosmic.explorer:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 60px -15px rgba(148, 163, 184, 0.08) !important; } .plan-card-cosmic.commander:hover, .plan-card-cosmic.pro:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 60px -15px rgba(167, 139, 250, 0.12) !important; border-color: rgba(167, 139, 250, 0.15) !important; } .plan-card-cosmic.elite:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 60px -15px rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.15) !important; } /* Plan card top accent strip */ .plan-card-cosmic::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, transparent 10%, var(--gw-primary) 50%, transparent 90%) !important; opacity: 0.4 !important; } .plan-card-cosmic.commander::before, .plan-card-cosmic.pro::before { background: linear-gradient(90deg, transparent 10%, #a78bfa 50%, transparent 90%) !important; } .plan-card-cosmic.elite::before { background: linear-gradient(90deg, transparent 10%, #fbbf24 50%, transparent 90%) !important; } /* Plan name and price */ .plan-name { font-weight: 800 !important; color: var(--gw-text) !important; } .plan-price { font-weight: 900 !important; font-size: 2rem !important; font-variant-numeric: tabular-nums !important; } /* Cosmic visual effects inside plan cards */ .cosmic-light-source, .cosmic-mirror, .cosmic-depth { pointer-events: none !important; position: absolute !important; z-index: 0 !important; } /* Feature highlights in plan cards */ .feature-highlights { position: relative !important; z-index: 1 !important; } .highlight-row { display: flex !important; justify-content: space-between !important; padding: 0.35rem 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.04) !important; } .highlight-label { color: var(--gw-text-secondary) !important; font-size: 0.82rem !important; } .highlight-value { font-weight: 700 !important; color: var(--gw-text) !important; font-size: 0.82rem !important; font-variant-numeric: tabular-nums !important; } /* Plan CTA buttons */ .plan-cta { border-radius: 12px !important; font-weight: 700 !important; padding: 0.75rem 1.5rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; text-decoration: none !important; display: inline-block !important; text-align: center !important; } .plan-cta.upgrade-nav { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border: none !important; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important; } .plan-cta.upgrade-nav:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important; } .plan-cta.current { background: rgba(15, 23, 42, 0.5) !important; border: 1px solid var(--gw-glass-border) !important; color: var(--gw-text-secondary) !important; cursor: default !important; } /* ── Upgrade Callout — Benefits section ── */ .upgrade-callout { background: linear-gradient(145deg, rgba(167, 139, 250, 0.06), rgba(15, 23, 42, 0.6)) !important; border: 1px solid rgba(167, 139, 250, 0.12) !important; border-radius: var(--gw-radius-lg) !important; padding: 1.25rem !important; } .benefits { position: relative !important; } .benefit { display: flex !important; align-items: flex-start !important; gap: 0.5rem !important; padding: 0.35rem 0 !important; font-size: 0.88rem !important; color: var(--gw-text-secondary) !important; } .benefit svg, .benefit .icon { color: #10b981 !important; flex-shrink: 0 !important; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ FINAL RESPONSIVE POLISH — Performance-Conscious Mobile ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Final Responsive Polish ── */ @media (max-width: 768px) { .analytics-card:hover, .auto-stat-card:hover, .broker-removal-card:hover, .blog-card:hover { transform: translateY(-1px) !important; } .error-card, .maintenance-card { margin: 1rem !important; padding: 1.5rem !important; } .hub-nav { flex-wrap: wrap !important; border-radius: 10px !important; } .hub-nav-item { font-size: 0.75rem !important; padding: 0.45rem 0.65rem !important; } .plan-card-cosmic { border-radius: 14px !important; } .plan-card-cosmic:hover { transform: translateY(-3px) !important; } .error-code { font-size: 3.5rem !important; } } @media (max-width: 480px) { /* Minimal glass on smallest screens for performance */ .dashboard-card, .stat-card, .mission-card, .analytics-card, .auto-stat-card { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .veil-console, .asd-score-card, .asd-section { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .plan-card-cosmic { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .error-code { font-size: 2.5rem !important; } .hub-alert, .hub-alert-banner { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .diagnostic-readout { font-size: 0.7rem !important; } } /* ═══════════════════════════════════════════════════════════════════ DIFFERENTIATION SECTION — Responsive ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .gw-diff-section h2 { font-size: 1.35rem !important; } .gw-diff-section [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } .gw-discovery-chain { flex-direction: column !important; gap: 0.25rem !important; } .gw-discovery-chain svg[viewBox="0 0 24 12"] { transform: rotate(90deg); width: 20px !important; height: 20px !important; } } /* ══════════════════════════════════════════════════════════════════ DESKTOP BREAKPOINTS — Phase 3 Wider layouts, larger typography, expanded grids ══════════════════════════════════════════════════════════════════ */ @media (min-width: 1200px) { /* Wider containers */ .mvp-container { max-width: 1320px !important; padding: 0 3.5rem !important; } /* Wider pricing grid */ .pricing-grid:not(.mvp-pricing-grid) { max-width: 1280px !important; gap: 1.5rem !important; } /* Larger hero text */ .hero-banner-title { font-size: 3rem !important; line-height: 1.15 !important; } .hero-banner-description { font-size: 1.1rem !important; line-height: 1.7 !important; } /* Feature cards spacing */ .mvp-value-card, .mvp-feature-card, .feature-card { padding: 2rem !important; } /* Stats numbers larger */ .mvp-stat-number { font-size: 3rem !important; } } @media (min-width: 1440px) { /* Max width expansion for ultra-wide */ .mvp-container { max-width: 1400px !important; padding: 0 4rem !important; } /* Even wider pricing */ .pricing-grid:not(.mvp-pricing-grid) { max-width: 1360px !important; gap: 1.75rem !important; } /* Hero text scales up further */ .hero-banner-title { font-size: 3.5rem !important; } .hero-banner-description { font-size: 1.15rem !important; max-width: 520px !important; } /* Wider hero terminal */ .hero-terminal-visual { width: 44% !important; } /* Stats even larger */ .mvp-stat-number { font-size: 3.25rem !important; } /* Section vertical spacing */ section, .mvp-section { padding-top: 5rem !important; padding-bottom: 5rem !important; } } /* ══════════════════════════════════════════════════════════════════ PHASE 4 — VISUAL ENHANCEMENT PASS Neon accents, glassmorphic depth, glow effects on desktop ══════════════════════════════════════════════════════════════════ */ /* Feature cards — neon accent on hover */ @media (min-width: 1024px) { .mvp-value-card:hover, .mvp-feature-card:hover, .feature-card:hover { border-color: rgba(16, 185, 129, 0.3) !important; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; transform: translateY(-4px) !important; } /* Icon glow intensified on desktop */ .mvp-value-icon { filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.4)) drop-shadow(0 0 40px rgba(16, 185, 129, 0.15)) !important; } } /* Stats section — neon glow numbers */ .mvp-stat-number { text-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15), 0 0 80px rgba(16, 185, 129, 0.08) !important; animation: gw-counter-glow 3s ease-in-out infinite !important; } /* Stats section — glassmorphic upgrade */ .mvp-stats { border: 1px solid rgba(16, 185, 129, 0.1) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 60px rgba(16, 185, 129, 0.05) !important; } /* Comparison section — Typical vs GalaxyWarden */ @media (min-width: 1024px) { /* GW card — green neon accent */ .gw-diff-card:last-child, [class*="comparison"] [class*="gw-card"], [class*="diff-card"]:nth-child(2) { border-left: 3px solid rgba(16, 185, 129, 0.5) !important; box-shadow: 0 0 30px rgba(16, 185, 129, 0.08), 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Typical card — dim red accent */ .gw-diff-card:first-child, [class*="comparison"] [class*="typical-card"], [class*="diff-card"]:nth-child(1) { border-left: 3px solid rgba(239, 68, 68, 0.3) !important; opacity: 0.85 !important; } } /* Pricing cards — enhanced hover glow on desktop */ @media (min-width: 1024px) { .tier-card:hover { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; transform: translateY(-6px) !important; } /* Commander MOST POPULAR badge — neon pulse */ .popular-badge, [class*="popular"] { animation: gw-neon-pulse 2s ease-in-out infinite !important; text-shadow: 0 0 10px currentColor !important; } } /* FAQ section — glassmorphic accordion items */ details, .faq-item, [class*="accordion"] { border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 12px !important; transition: all 0.3s ease !important; } details[open], .faq-item.active, [class*="accordion"].open { border-color: rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } /* Sample report section — terminal glow */ .gw-sample-report, [class*="sample-report"] { border: 1px solid rgba(16, 185, 129, 0.15) !important; box-shadow: 0 0 30px rgba(16, 185, 129, 0.06), 0 8px 40px rgba(0, 0, 0, 0.3) !important; position: relative !important; overflow: hidden !important; } /* ══════════════════════════════════════════════════════════════════ PHASE 5 — AMBIENT DESKTOP EFFECTS Gradient mesh, floating particles, section divider glow lines ══════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* Animated gradient mesh background — subtle, CSS only */ body::before { content: '' !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: radial-gradient(ellipse 40% 30% at 20% 20%, rgba(16, 185, 129, 0.04) 0%, transparent 70%), radial-gradient(ellipse 35% 40% at 80% 30%, rgba(56, 189, 248, 0.03) 0%, transparent 70%), radial-gradient(ellipse 30% 35% at 50% 80%, rgba(167, 139, 250, 0.03) 0%, transparent 70%) !important; background-size: 200% 200% !important; animation: gw-gradient-mesh 30s ease infinite !important; pointer-events: none !important; z-index: -2 !important; } /* Enhanced ambient orbs for desktop */ #main-content::before { width: 800px !important; height: 800px !important; background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, transparent 70%) !important; animation: gw-orb-drift-1 25s ease-in-out infinite !important; } #main-content::after { width: 700px !important; height: 700px !important; background: radial-gradient(circle, rgba(167, 139, 250, 0.07) 0%, transparent 70%) !important; animation: gw-orb-drift-2 30s ease-in-out infinite !important; } /* Section divider glow lines */ section + section::before, .mvp-section + .mvp-section::before, #pricing::after { content: '' !important; display: block !important; width: 60% !important; max-width: 600px !important; height: 1px !important; margin: 0 auto !important; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), rgba(56, 189, 248, 0.15), rgba(167, 139, 250, 0.15), transparent) !important; background-size: 200% 100% !important; animation: gw-section-glow-line 6s ease infinite !important; position: relative !important; top: -2rem !important; } /* Radial glow spot behind hero */ .hero-banner::after { content: '' !important; position: absolute !important; width: 600px !important; height: 600px !important; right: 10% !important; top: 20% !important; background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, transparent 70%) !important; filter: blur(80px) !important; pointer-events: none !important; z-index: 0 !important; } /* Radial glow spot behind pricing */ #pricing::before { width: 100% !important; height: 100% !important; background: radial-gradient(ellipse 50% 40% at 25% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 75% 50%, rgba(167, 139, 250, 0.06) 0%, transparent 70%) !important; } /* Radial glow behind final CTA */ .gw-final-cta::before, [class*="final-cta"]::before { content: '' !important; position: absolute !important; width: 500px !important; height: 400px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%) !important; filter: blur(60px) !important; pointer-events: none !important; z-index: -1 !important; } /* Floating particle dots — pure CSS */ .hero-banner::before { content: '' !important; position: absolute !important; width: 4px !important; height: 4px !important; background: rgba(16, 185, 129, 0.4) !important; border-radius: 50% !important; right: 25% !important; top: 30% !important; box-shadow: 60px 40px 0 rgba(56, 189, 248, 0.3), 120px -20px 0 rgba(167, 139, 250, 0.3), -30px 80px 0 rgba(16, 185, 129, 0.25), 200px 60px 0 rgba(56, 189, 248, 0.2), -60px -40px 0 rgba(167, 139, 250, 0.2), 150px 100px 0 rgba(16, 185, 129, 0.3), 80px -60px 0 rgba(56, 189, 248, 0.25) !important; animation: gw-particle-float 12s ease-in-out infinite !important; pointer-events: none !important; z-index: 1 !important; } }