/*========================================================== GOOGLE FONT ==========================================================*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /*========================================================== ROOT VARIABLES ==========================================================*/ :root{ --primary:#7A7A73; --secondary:#DDDAD0; --dark:#4F4F49; --white:#ffffff; --black:#111111; --glass-bg:rgba(255,255,255,.16); --glass-border:rgba(255,255,255,.28); --glass-shadow:0 15px 35px rgba(0,0,0,.15); --blur:blur(18px); --radius:22px; --transition:.40s cubic-bezier(.22,.61,.36,1); } /*========================================================== FLOATING WRAPPER ==========================================================*/ .floating-left, .floating-right{ position:fixed; bottom:35px; display:flex; flex-direction:column; gap:16px; z-index:9999; } .floating-left{ left:20px; } .floating-right{ right:20px; } /*========================================================== GLASS BUTTON ==========================================================*/ .glass-btn{ position:relative; width:60px; height:60px; border-radius:var(--radius); display:flex; justify-content:center; align-items:center; overflow:hidden; cursor:pointer; text-decoration:none; transition:var(--transition); background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--glass-shadow); } /*========================================================== ICON ==========================================================*/ .glass-btn i{ font-size:23px; color:white; transition:.35s; z-index:3; } /*========================================================== LABEL ==========================================================*/ .glass-btn span{ position:absolute; white-space:nowrap; font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; color:white; opacity:0; transition:.35s; } /* Left Label */ .floating-left .glass-btn span{ left:75px; } /* Right Label */ .floating-right .glass-btn span{ left:auto; right:75px; } /*========================================================== EXPAND ==========================================================*/ .glass-btn{ width:60px; height:60px; transition:all .35s ease; } .glass-btn:hover{ width:60px; } /*========================================================== LABEL SHOW ==========================================================*/ .glass-btn span{ position:absolute; left:75px; opacity:0; transform:translateX(-15px); transition:.35s; white-space:nowrap; pointer-events:none; } .glass-btn:hover span{ opacity:1; transform:translateX(0); } /*========================================================== ICON MOVE ==========================================================*/ .glass-btn:hover i{ transform:scale(1.15); } /*========================================================== GLASS LIGHT ==========================================================*/ .glass-btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient( 135deg, rgba(255,255,255,.35), rgba(255,255,255,0) ); opacity:0; transition:.35s; } .glass-btn:hover::before{ opacity:1; } /*========================================================== FLOATING ==========================================================*/ @keyframes floating{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } 100%{ transform:translateY(0); } } .glass-btn{ animation:floating 4s ease-in-out infinite; } .glass-btn:nth-child(2){ animation-delay:.4s; } .glass-btn:nth-child(3){ animation-delay:.8s; } /*========================================================== VH PACKERS & MOVERS PREMIUM FLOATING GLASS DOCK File : floating-dock.css Part : 2 / 3 ==========================================================*/ /*========================================================== BRAND COLORS ==========================================================*/ .call-btn{ background:linear-gradient(135deg,#7A7A73,#5E5E57); } .whatsapp-btn{ background:linear-gradient(135deg,#25D366,#128C7E); } .email-btn{ background:linear-gradient(135deg,#E67E22,#D35400); } .instagram-btn{ background:linear-gradient( 135deg, #833AB4, #FD1D1D, #FCAF45 ); } .facebook-btn{ background:linear-gradient( 135deg, #1877F2, #0D5DD7 ); } .linkedin-btn{ background:linear-gradient( 135deg, #0A66C2, #004182 ); } .youtube-btn{ background:linear-gradient( 135deg, #FF0000, #C10000 ); } .x-btn{ background:linear-gradient( 135deg, #000000, #2B2B2B ); } /*========================================================== HOVER SHADOW ==========================================================*/ .glass-btn:hover{ box-shadow: 0 20px 45px rgba(0,0,0,.22), 0 0 22px rgba(255,255,255,.22), inset 0 1px rgba(255,255,255,.35); } /*========================================================== ICON EFFECT ==========================================================*/ .glass-btn:hover i{ transform:scale(1.15) rotate(-8deg); } /*========================================================== GLASS REFLECTION ==========================================================*/ .glass-btn::after{ content:""; position:absolute; top:-150%; left:-40%; width:55%; height:350%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent ); transform:rotate(28deg); transition:1s; } .glass-btn:hover::after{ left:140%; } /*========================================================== RIPPLE SUPPORT ==========================================================*/ .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0); pointer-events:none; animation:ripple .65s linear; } @keyframes ripple{ to{ transform:scale(6); opacity:0; } } /*========================================================== LABEL ANIMATION ==========================================================*/ .glass-btn span{ letter-spacing:.3px; transition:.35s; } .glass-btn:hover span{ transform:translateX(0); } /*========================================================== ACTIVE CLICK ==========================================================*/ .glass-btn:active{ transform:scale(.94); } /*========================================================== PULSE GLOW ==========================================================*/ @keyframes pulseGlow{ 0%{ box-shadow:0 0 0 rgba(255,255,255,0); } 50%{ box-shadow: 0 0 18px rgba(255,255,255,.28); } 100%{ box-shadow:0 0 0 rgba(255,255,255,0); } } .glass-btn{ animation: floating 4s ease-in-out infinite, pulseGlow 3s ease-in-out infinite; } /*========================================================== SMOOTH TRANSITION ==========================================================*/ .glass-btn, .glass-btn i, .glass-btn span{ transition:all .35s ease; } /*========================================================== VH PACKERS & MOVERS PREMIUM FLOATING GLASS DOCK File : floating-dock.css Part : 3 / 3 ==========================================================*/ /*========================================================== MAGNETIC HOVER ==========================================================*/ .glass-btn{ will-change:transform; } .glass-btn:hover{ transform:translateY(-4px) scale(1.05); } /*========================================================== TOOLTIP ==========================================================*/ .glass-btn span{ display:flex; align-items:center; height:100%; pointer-events:none; } /*========================================================== GLASS BORDER ==========================================================*/ .glass-btn{ outline:1px solid rgba(255,255,255,.08); outline-offset:-1px; } /*========================================================== ICON SMOOTH ==========================================================*/ .glass-btn i{ backface-visibility:hidden; -webkit-font-smoothing:antialiased; } /*========================================================== SCROLL FADE ==========================================================*/ .floating-left, .floating-right{ transition: opacity .35s ease, transform .35s ease; } .dock-hide{ opacity:0; pointer-events:none; transform:translateY(-50%) translateX(30px); } .floating-left.dock-hide{ transform:translateY(-50%) translateX(-30px); } /*========================================================== FOCUS STATE ==========================================================*/ .glass-btn:focus{ outline:2px solid rgba(255,255,255,.45); outline-offset:4px; } /*========================================================== MOBILE ==========================================================*/ @media(max-width:992px){ .floating-left{ left:12px; } .floating-right{ right:12px; } .glass-btn{ width:56px; height:56px; } .glass-btn:hover{ width:170px; } } @media(max-width:768px){ .floating-left, .floating-right{ gap:12px; } .glass-btn{ width:50px; height:50px; border-radius:18px; } .glass-btn i{ font-size:20px; } .glass-btn:hover{ width:50px; transform:scale(1.08); } .glass-btn span{ display:none; } } /*========================================================== SMALL MOBILE ==========================================================*/ @media(max-width:480px){ .floating-left{ left:8px; } .floating-right{ right:8px; } .glass-btn{ width:46px; height:46px; } .glass-btn i{ font-size:18px; } } /*========================================================== REDUCE MOTION ==========================================================*/ @media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*========================================================== DARK MODE ==========================================================*/ @media(prefers-color-scheme:dark){ .glass-btn{ background:rgba(35,35,35,.35); border:1px solid rgba(255,255,255,.10); } } /*========================================================== PERFORMANCE ==========================================================*/ .floating-left, .floating-right, .glass-btn{ transform-style:preserve-3d; } /*========================================================== PRINT ==========================================================*/ @media print{ .floating-left, .floating-right{ display:none; } } /*========================================================== END OF FILE ==========================================================*/ /* Active Icon */ .dock-active{ box-shadow: 0 0 30px rgba(255,255,255,.45), 0 0 45px rgba(255,255,255,.18); }