/* ========================================================================= CREATED BY SYSTECT - EXACT AQWAKE SIGNATURE STYLING ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&display=swap'); .footer-systect-credit { margin-top: 0.35rem; display: flex; align-items: center; justify-content: center; gap: 6px; } .footer-created-by-text { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.04em; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .systect-neon-led { font-family: 'Orbitron', sans-serif; font-size: 1.12rem; font-weight: 800; text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; color: #00f0ff; background: rgba(8, 8, 10, 0.78); padding: 0.2rem 0.65rem; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 240, 255, 0.75), 0 0 12px rgba(0, 240, 255, 0.35); animation: systectNeonPulse 6s ease-in-out infinite; transition: all 0.25s ease; } .systect-neon-led:hover { background: rgba(0, 0, 0, 0.92); border-color: rgba(0, 240, 255, 0.4); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 240, 255, 0.25); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000, 0 0 6px #fff, 0 0 14px currentColor; } @keyframes systectNeonPulse { 0%, 100% { color: #00f0ff; border-color: rgba(0, 240, 255, 0.25); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 240, 255, 0.75), 0 0 12px rgba(0, 240, 255, 0.35); } 20% { color: #ff3de6; border-color: rgba(255, 61, 230, 0.25); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 5px rgba(255, 61, 230, 0.75), 0 0 12px rgba(255, 61, 230, 0.35); } 40% { color: #44ff26; border-color: rgba(68, 255, 38, 0.25); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 5px rgba(68, 255, 38, 0.75), 0 0 12px rgba(68, 255, 38, 0.35); } 60% { color: #ff9d00; border-color: rgba(255, 157, 0, 0.25); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 5px rgba(255, 157, 0, 0.75), 0 0 12px rgba(255, 157, 0, 0.35); } 80% { color: #ffea00; border-color: rgba(255, 234, 0, 0.25); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 5px rgba(255, 234, 0, 0.75), 0 0 12px rgba(255, 234, 0, 0.35); } } /* ========================================================================= SYSTECT SIGNATURE NEON SOCIAL ICONS - EXACT WWW.SYSTECT.CO.ZA BEHAVIOR ========================================================================= */ .footer-social-icons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 1.25rem; } .footer-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #ffffff !important; text-decoration: none; animation: socialWave var(--bd, 4s) ease-in-out infinite var(--bdy, 0s); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, filter 0.35s, opacity 0.3s; will-change: transform; cursor: pointer; } .footer-icon-btn i { font-size: 1.15rem; color: #ffffff; transition: transform 0.25s ease; } /* Systect Signature Neon Colorways */ .footer-icon-btn.facebook { background: #1877F2; box-shadow: 0 4px 14px rgba(24, 119, 242, 0.5), 0 0 14px rgba(24, 119, 242, 0.35); } .footer-icon-btn.instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 4px 14px rgba(220, 39, 67, 0.55), 0 0 14px rgba(220, 39, 67, 0.35); } .footer-icon-btn.tiktok { background: #010101; border: 1px solid rgba(0, 240, 255, 0.45); box-shadow: 0 4px 14px rgba(0, 240, 255, 0.45), 0 0 16px rgba(255, 0, 128, 0.35); } .footer-icon-btn.linkedin { background: #0A66C2; box-shadow: 0 4px 14px rgba(10, 102, 194, 0.5), 0 0 14px rgba(10, 102, 194, 0.35); } .footer-icon-btn.email { background: #0d281e; border: 1px solid rgba(0, 255, 170, 0.45); box-shadow: 0 4px 14px rgba(0, 255, 170, 0.4), 0 0 14px rgba(0, 255, 170, 0.3); } /* Hover States with Intense Neon Illumination & Spring Elevation */ .footer-icon-btn:hover { transform: translateY(-8px) scale(1.15) !important; filter: brightness(1.22); z-index: 3; } .footer-icon-btn:hover i { transform: scale(1.15); } .footer-icon-btn.facebook:hover { box-shadow: 0 10px 28px rgba(24, 119, 242, 0.85), 0 0 26px rgba(24, 119, 242, 0.65); } .footer-icon-btn.instagram:hover { box-shadow: 0 10px 28px rgba(220, 39, 67, 0.85), 0 0 26px rgba(220, 39, 67, 0.65); } .footer-icon-btn.tiktok:hover { box-shadow: 0 10px 28px rgba(0, 240, 255, 0.95), 0 0 28px rgba(255, 0, 128, 0.75); } .footer-icon-btn.linkedin:hover { box-shadow: 0 10px 28px rgba(10, 102, 194, 0.85), 0 0 26px rgba(10, 102, 194, 0.65); } .footer-icon-btn.email:hover { box-shadow: 0 10px 28px rgba(0, 255, 170, 0.95), 0 0 28px rgba(0, 255, 170, 0.65); } /* Dim other icons when one is hovered (Systect signature hover interaction) */ .footer-social-icons:hover .footer-icon-btn:not(:hover) { opacity: 0.55; filter: grayscale(0.2); } /* Smooth Wave Floating Animation */ @keyframes socialWave { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(2deg); } 75% { transform: translateY(4px) rotate(-1.5deg); } } @media (max-width: 768px) { .footer-icon-btn { width: 40px; height: 40px; } .footer-icon-btn i { font-size: 1.05rem; } }