/* /assets/socials.css */ :root{ --social-size:44px; --social-color:#0d6efd; } .socials{display:flex;gap:16px;} .social{ width:var(--social-size);height:var(--social-size); border:2px solid var(--social-color);border-radius:999px; display:inline-flex;align-items:center;justify-content:center; color:var(--social-color);transition:transform .15s ease; } .social:hover{transform:translateY(-2px);} .social i{ display:block;width:20px;height:20px;background:currentColor; -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat; } /* absolute URLs so it works from /, /services.html, /blog/* etc. */ .social.ig i{ -webkit-mask-image:url('/assets/icons/instagram.svg'); mask-image:url('/assets/icons/instagram.svg'); } .social.li i{ -webkit-mask-image:url('/assets/icons/linkedin.svg'); mask-image:url('/assets/icons/linkedin.svg'); } .social.x i{ -webkit-mask-image:url('/assets/icons/x.svg'); mask-image:url('/assets/icons/x.svg'); } .social.fb i{ -webkit-mask-image:url('/assets/icons/facebook.svg'); mask-image:url('/assets/icons/facebook.svg'); } .social.yt i{ -webkit-mask-image:url('/assets/icons/youtube.svg'); mask-image:url('/assets/icons/youtube.svg'); }