/* ========================================= Social Links — layouts/partials/social-links.html Place this file at: static/css/social.css Link in : ========================================= */ .social-links { padding: 2rem 1rem; text-align: center; } .social-links__heading { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.25rem; opacity: 0.7; } .social-links__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* Base button */ .social-links__item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 2rem; text-decoration: none; font-size: 0.95rem; font-weight: 500; color: #fff; transition: opacity 0.2s ease, transform 0.2s ease; } .social-links__item:hover, .social-links__item:focus-visible { opacity: 0.85; transform: translateY(-2px); outline: 3px solid currentColor; outline-offset: 3px; } /* Brand colours */ .social-links__item--tiktok { background: #010101; } .social-links__item--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .social-links__item--facebook { background: #1877f2; } .social-links__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* On very small screens, stack vertically */ @media (max-width: 360px) { .social-links__list { flex-direction: column; align-items: center; } }