;
opening it pops a small content panel above the icons. No JS needed.
Expected markup (inside a .wayfinder so it matches the other cards):
======================================== */
.socials-popout {
position: relative;
flex: 0 0 auto;
}
.socials-popout summary {
list-style: none;
display: inline-flex;
gap: var(--space-sm);
cursor: pointer;
}
.socials-popout summary::-webkit-details-marker {
display: none;
}
/* Square dark buttons with white glyphs, mirroring the article share
buttons (.news-article-share-link). The glyph filter lives on the img
inside the span: a filter on the square itself would invert its
background too. */
.socials-popout-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--primary-black);
border-radius: var(--radius-md);
transition: opacity var(--transition-fast);
}
.socials-popout-btn img {
width: 24px;
height: 24px;
/* Flatten the brand-coloured SVGs to white. */
filter: brightness(0) invert(1);
}
.socials-popout summary:hover .socials-popout-btn,
.socials-popout summary:focus-visible .socials-popout-btn,
.socials-popout[open] summary .socials-popout-btn {
opacity: 0.8;
}
/* In dark mode the squares (--text-main) become light, so flip the
glyphs back to dark for contrast. */
html.dark-mode .socials-popout-btn img {
filter: brightness(0);
}
/* The pop-out panel sits just above the icons (the widget lives in the
footer, so it opens upward) and is kept on-screen on narrow widths. */
.socials-popout-panel {
position: absolute;
bottom: calc(100% + var(--space-sm));
right: 0;
min-width: 260px;
max-width: min(20rem, calc(100vw - 2rem));
background: var(--background-body);
color: var(--text-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-md);
z-index: var(--z-popover);
text-align: left;
}
/* When the wayfinder stacks and centres on small screens, anchor the
panel to the centre of the icons instead of their right edge so it
cannot run off the left of the viewport. */
@media (max-width: 600px) {
.socials-popout-panel {
right: 50%;
transform: translateX(50%);
}
}
/* Subtle full-page shade behind the open panel (still no JS, no markup
change). The shade is the summary's ::after pseudo-element, so a click
anywhere on it counts as a click on the and fires its native
toggle, closing the
See what we've been up to
