/* ========================================================= VBLINK HR CONSULTANTS FLOATING SOCIAL MEDIA BUTTON ISOLATED / STANDALONE CSS FEATURES: --------------------------------------------------------- • Floating + / - button • Five radial social icons • Social label above button • Oscillating Social label animation • Tooltips • Desktop / mobile responsive • Extra-small device support • Font Awesome colour protection ========================================================= */ /* ========================================================= MAIN CONTAINER ========================================================= */ #socialFloat { position: fixed !important; right: 20px !important; top: 75% !important; bottom: auto !important; width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; z-index: 999999 !important; font-family: Arial, Helvetica, sans-serif !important; line-height: normal !important; color: #ffffff !important; } /* ========================================================= SOCIAL LABEL --------------------------------------------------------- The label is generated automatically. No additional HTML is required. ========================================================= */ #socialFloat::before { content: "Social" !important; position: absolute !important; left: 50% !important; top: -28px !important; transform: translateX(-50%) translateY(0) !important; min-width: 41px !important; height: 24px !important; padding: 3px 9px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 7px 7px 3px 3px !important; background: linear-gradient( 135deg, #172554, #2f54eb, #5b8cff ) !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.4px !important; line-height: 1 !important; white-space: nowrap !important; text-align: center !important; box-shadow: 0 5px 15px rgba(47, 84, 235, 0.35) !important; border: 1px solid rgba(255,255,255,0.20) !important; z-index: 999998 !important; pointer-events: none !important; animation: socialLabelOscillate 2.2s ease-in-out infinite !important; } /* ========================================================= SMALL DECORATIVE CONNECTION --------------------------------------------------------- Makes the label visually touch the button. ========================================================= */ #socialFloat::after { content: "" !important; position: absolute !important; left: 50% !important; top: -5px !important; width: 8px !important; height: 8px !important; transform: translateX(-50%) rotate(45deg) !important; background: #2f54eb !important; z-index: 999997 !important; pointer-events: none !important; } /* ========================================================= SOCIAL LABEL ANIMATION --------------------------------------------------------- Slight vertical oscillation. ========================================================= */ @keyframes socialLabelOscillate { 0% { transform: translateX(-50%) translateY(0); } 25% { transform: translateX(-50%) translateY(-2px); } 50% { transform: translateX(-50%) translateY(0); } 75% { transform: translateX(-50%) translateY(2px); } 100% { transform: translateX(-50%) translateY(0); } } /* ========================================================= + / - BUTTON ========================================================= */ #socialFloat .social-toggle { position: absolute !important; top: 0 !important; right: 0 !important; width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; border-radius: 50% !important; background: linear-gradient( 135deg, #2f54eb, #5b8cff ) !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 32px !important; font-weight: 400 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 8px 25px rgba(47, 84, 235, 0.35) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; appearance: none !important; -webkit-appearance: none !important; z-index: 999999 !important; } /* ========================================================= + / - HOVER ========================================================= */ #socialFloat .social-toggle:hover { transform: scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 135deg, #2f54eb, #5b8cff ) !important; box-shadow: 0 10px 30px rgba(47, 84, 235, 0.45) !important; } /* ========================================================= + / - FOCUS ========================================================= */ #socialFloat .social-toggle:focus, #socialFloat .social-toggle:focus-visible { outline: none !important; color: #ffffff !important; } /* ========================================================= PLUS / MINUS ========================================================= */ #socialFloat .social-toggle .plus-icon, #socialFloat .social-toggle .minus-icon { position: absolute !important; color: #ffffff !important; background: transparent !important; display: block !important; transition: opacity 0.25s ease, transform 0.25s ease !important; } /* ========================================================= PLUS ========================================================= */ #socialFloat .social-toggle .plus-icon { opacity: 1 !important; transform: rotate(0deg) scale(1) !important; } /* ========================================================= MINUS ========================================================= */ #socialFloat .social-toggle .minus-icon { opacity: 0 !important; transform: rotate(-90deg) scale(0.5) !important; } /* ========================================================= ACTIVE PLUS ========================================================= */ #socialFloat.active .social-toggle .plus-icon { opacity: 0 !important; transform: rotate(90deg) scale(0.5) !important; } /* ========================================================= ACTIVE MINUS ========================================================= */ #socialFloat.active .social-toggle .minus-icon { opacity: 1 !important; transform: rotate(0deg) scale(1) !important; } /* ========================================================= SOCIAL ICON CONTAINER ========================================================= */ #socialFloat .social-icons { position: absolute !important; left: 0 !important; top: 0 !important; width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; background: transparent !important; } /* ========================================================= SOCIAL ICON BASE ========================================================= */ #socialFloat .social-icon { position: absolute !important; left: 5px !important; top: 5px !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; line-height: 1 !important; opacity: 0 !important; transform: translate(0, 0) scale(0.3) !important; pointer-events: none !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important; transition: transform 0.45s cubic-bezier(.68, -0.55, .27, 1.55), opacity 0.3s ease !important; } /* ========================================================= FORCE ICON COLOUR ========================================================= */ #socialFloat .social-icon i, #socialFloat .social-icon i::before { color: #ffffff !important; background: transparent !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ACTIVE STATE ========================================================= */ #socialFloat.active .social-icons { pointer-events: auto !important; } #socialFloat.active .social-icon { opacity: 1 !important; pointer-events: auto !important; } /* ========================================================= ICON GEOMETRY --------------------------------------------------------- Centre: X = 24px Y = 24px Radius: 72px Positions: 90° = Top 135° = Upper-left 180° = Left 225° = Lower-left 270° = Bottom ========================================================= */ /* ========================================================= FACEBOOK TOP ========================================================= */ #socialFloat.active .social-icon.facebook { transform: translate(0, -72px) scale(1) !important; } #socialFloat .social-icon.facebook { background: #1877f2 !important; color: #ffffff !important; } /* ========================================================= LINKEDIN UPPER LEFT ========================================================= */ #socialFloat.active .social-icon.linkedin { transform: translate(-51px, -51px) scale(1) !important; } #socialFloat .social-icon.linkedin { background: #0a66c2 !important; color: #ffffff !important; } /* ========================================================= WHATSAPP LEFT ========================================================= */ #socialFloat.active .social-icon.whatsapp { transform: translate(-72px, 0) scale(1) !important; } #socialFloat .social-icon.whatsapp { background: #25d366 !important; color: #ffffff !important; } /* ========================================================= INSTAGRAM LOWER LEFT ========================================================= */ #socialFloat.active .social-icon.instagram { transform: translate(-51px, 51px) scale(1) !important; } #socialFloat .social-icon.instagram { background: linear-gradient( 135deg, #833ab4, #fd1d1d, #fcb045 ) !important; color: #ffffff !important; } /* ========================================================= EMAIL BOTTOM ========================================================= */ #socialFloat.active .social-icon.email { transform: translate(0, 72px) scale(1) !important; } #socialFloat .social-icon.email { background: #64748b !important; color: #ffffff !important; } /* ========================================================= LINK COLOUR PROTECTION ========================================================= */ #socialFloat .social-icon:link, #socialFloat .social-icon:visited, #socialFloat .social-icon:hover, #socialFloat .social-icon:active { color: #ffffff !important; text-decoration: none !important; } /* ========================================================= GENERAL HOVER ========================================================= */ #socialFloat .social-icon:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28) !important; color: #ffffff !important; } /* ========================================================= FACEBOOK HOVER ========================================================= */ #socialFloat.active .social-icon.facebook:hover { transform: translate(0, -72px) scale(1.12) !important; } /* ========================================================= LINKEDIN HOVER ========================================================= */ #socialFloat.active .social-icon.linkedin:hover { transform: translate(-51px, -51px) scale(1.12) !important; } /* ========================================================= WHATSAPP HOVER ========================================================= */ #socialFloat.active .social-icon.whatsapp:hover { transform: translate(-72px, 0) scale(1.12) !important; } /* ========================================================= INSTAGRAM HOVER ========================================================= */ #socialFloat.active .social-icon.instagram:hover { transform: translate(-51px, 51px) scale(1.12) !important; } /* ========================================================= EMAIL HOVER ========================================================= */ #socialFloat.active .social-icon.email:hover { transform: translate(0, 72px) scale(1.12) !important; } /* ========================================================= TOOLTIP ========================================================= */ #socialFloat .social-icon::after { content: attr(aria-label) !important; position: absolute !important; right: 58px !important; top: 50% !important; transform: translateY(-50%) translateX(10px) !important; padding: 6px 10px !important; margin: 0 !important; border: none !important; border-radius: 6px !important; background: #1e293b !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease, transform 0.25s ease !important; } #socialFloat .social-icon:hover::after { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { #socialFloat { right: 20px !important; top: 75% !important; bottom: auto !important; transform: translateY(-50%) !important; } /* ----------------------------------------------------- SOCIAL LABEL ----------------------------------------------------- */ #socialFloat::before { top: -26px !important; min-width: 44px !important; height: 22px !important; padding: 3px 8px !important; font-size: 10px !important; border-radius: 6px 6px 3px 3px !important; } #socialFloat::after { top: -5px !important; width: 7px !important; height: 7px !important; } /* ----------------------------------------------------- TOGGLE ----------------------------------------------------- */ #socialFloat .social-toggle { width: 48px !important; height: 48px !important; font-size: 29px !important; } /* ----------------------------------------------------- SOCIAL ICONS ----------------------------------------------------- */ #socialFloat .social-icon { width: 38px !important; height: 38px !important; left: 5px !important; top: 5px !important; font-size: 17px !important; } /* ----------------------------------------------------- MOBILE RADIUS = 62px ----------------------------------------------------- */ /* FACEBOOK */ #socialFloat.active .social-icon.facebook { transform: translate(0, -62px) scale(1) !important; } /* LINKEDIN */ #socialFloat.active .social-icon.linkedin { transform: translate(-44px, -44px) scale(1) !important; } /* WHATSAPP */ #socialFloat.active .social-icon.whatsapp { transform: translate(-62px, 0) scale(1) !important; } /* INSTAGRAM */ #socialFloat.active .social-icon.instagram { transform: translate(-44px, 44px) scale(1) !important; } /* EMAIL */ #socialFloat.active .social-icon.email { transform: translate(0, 62px) scale(1) !important; } /* ----------------------------------------------------- HIDE TOOLTIPS ----------------------------------------------------- */ #socialFloat .social-icon::after { display: none !important; } } /* ========================================================= MOBILE HOVER POSITIONS ========================================================= */ @media (max-width: 600px) { /* FACEBOOK */ #socialFloat.active .social-icon.facebook:hover { transform: translate(0, -62px) scale(1.12) !important; } /* LINKEDIN */ #socialFloat.active .social-icon.linkedin:hover { transform: translate(-44px, -44px) scale(1.12) !important; } /* WHATSAPP */ #socialFloat.active .social-icon.whatsapp:hover { transform: translate(-62px, 0) scale(1.12) !important; } /* INSTAGRAM */ #socialFloat.active .social-icon.instagram:hover { transform: translate(-44px, 44px) scale(1.12) !important; } /* EMAIL */ #socialFloat.active .social-icon.email:hover { transform: translate(0, 62px) scale(1.12) !important; } } /* ========================================================= EXTRA SMALL DEVICES ========================================================= */ @media (max-width: 380px) { #socialFloat { right: 15px !important; } /* ----------------------------------------------------- SOCIAL LABEL ----------------------------------------------------- */ #socialFloat::before { top: -24px !important; min-width: 42px !important; height: 21px !important; padding: 2px 7px !important; font-size: 9px !important; } #socialFloat::after { top: -5px !important; width: 6px !important; height: 6px !important; } /* ----------------------------------------------------- SOCIAL ICON SIZE ----------------------------------------------------- */ #socialFloat .social-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; } /* ----------------------------------------------------- FACEBOOK ----------------------------------------------------- */ #socialFloat.active .social-icon.facebook { transform: translate(0, -56px) scale(1) !important; } /* ----------------------------------------------------- LINKEDIN ----------------------------------------------------- */ #socialFloat.active .social-icon.linkedin { transform: translate(-40px, -40px) scale(1) !important; } /* ----------------------------------------------------- WHATSAPP ----------------------------------------------------- */ #socialFloat.active .social-icon.whatsapp { transform: translate(-56px, 0) scale(1) !important; } /* ----------------------------------------------------- INSTAGRAM ----------------------------------------------------- */ #socialFloat.active .social-icon.instagram { transform: translate(-40px, 40px) scale(1) !important; } /* ----------------------------------------------------- EMAIL ----------------------------------------------------- */ #socialFloat.active .social-icon.email { transform: translate(0, 56px) scale(1) !important; } } /* ========================================================= FINAL FONT AWESOME COLOUR LOCK ========================================================= */ #socialFloat .social-icon.facebook i, #socialFloat .social-icon.facebook i::before, #socialFloat .social-icon.linkedin i, #socialFloat .social-icon.linkedin i::before, #socialFloat .social-icon.whatsapp i, #socialFloat .social-icon.whatsapp i::before, #socialFloat .social-icon.instagram i, #socialFloat .social-icon.instagram i::before, #socialFloat .social-icon.email i, #socialFloat .social-icon.email i::before { color: #ffffff !important; background: transparent !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ACCESSIBILITY --------------------------------------------------------- Respect reduced-motion preferences. ========================================================= */ @media (prefers-reduced-motion: reduce) { #socialFloat::before { animation: none !important; } }