Reports

The main reason why the logos (social icons) appear dimmer than the glowing text is due to differences in how text-shadow works on text versus icon fonts (like Font Awesome).

Why is this happening? 1. Icon Rendering Difference: Font Awesome icons are vector-based and are rendered differently from regular text. The text-shadow effect doesn’t have the same visual intensity on icon fonts. 2. Opacity of the Parent Container: The .card has opacity: 0.8; which dims everything inside, including the glow effect on the icons. 3. Shadow Intensity: The text-shadow applied to the icons is weaker in comparison to the animated text.

How to Fix the Glow for Icons

Here are some fixes you can apply to match the glow effect: 1. Remove opacity from .card Opacity affects the entire container and its children. Instead, use rgba backgrounds for transparency:

   .card {
  background: linear-gradient(135deg, rgba(245, 243, 243, 0.1), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Remove opacity: 0.8; */
}

2. Use a Stronger Glow on Icons Increase the intensity and spread of the glow on hover and default states:

    .social-icons a {
  font-size: 40px;
  color: white;
  text-decoration: none;
  transition: 0.3s;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1),
               0 0 25px rgba(255, 255, 255, 0.8),
               0 0 50px rgba(255, 255, 255, 0.6);
}

.social-icons a:hover {
  text-shadow: 0 0 20px rgba(255, 255, 255, 1),
               0 0 40px rgba(255, 255, 255, 0.9),
               0 0 60px rgba(255, 255, 255, 0.8);
}

79476017