/* ------------------------------ Site footer ------------------------------ Its own stylesheet, loaded from the shared head partial, because the pages carrying this footer are split between two page stylesheets — the homepage loads home.css, everything else loads site.css — and neither could hold it without the other going unstyled. Same reasoning as token-preview.css and project-grid.css. The markup is templates/partials/footer.html; the two move together. */ .site-footer { border-top: 1px solid var(--pf-color-border); padding: var(--pf-space-8) 0 var(--pf-space-3); color: var(--pf-color-muted); font-size: var(--pf-text-sm); } /* The Explore pages render "footer-guest" instead of "footer" and so drop this once you are signed in: they are part of the workspace then, reached from the top bar rather than from the marketing site, and a column of Product / Contact links is written for someone who has not arrived yet. [data-auth] is set on before first paint by the inline script in the head partial, the same attribute that chooses between the two headers — so the footer is never briefly on screen before being taken away. Only the --guest variant carries the rule, so every other page keeps its footer whatever the visitor's state. */ :root[data-auth="in"] .site-footer--guest { display: none; } /* Width, centring and gutters come from .container in tokens.css; the row itself is data-container="row" on the markup. What is left here is the part that is this row's own — how it distributes and wraps. */ .site-footer__top { flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--pf-space-7); } .site-footer__brand { display: flex; flex-direction: column; gap: var(--pf-space-2); } /* .brand is defined per page stylesheet (site.css and home.css both size it for the header); the footer wants the same mark at the same weight, so it is left alone here beyond the tagline beneath it. */ .site-footer__brand p { margin: 0; max-width: 22ch; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--pf-space-8); } .site-footer__group { display: flex; flex-direction: column; gap: var(--pf-space-2); } /* An

for structure — a screen reader's landmark list should say what each column of links is — sized down to a label so it reads as one. */ .site-footer__group h2 { margin: 0 0 var(--pf-space-1); font-size: var(--pf-text-xs); font-weight: var(--pf-weight-medium); color: var(--pf-color-ink); letter-spacing: var(--pf-tracking-loose); } /* The social marks: a row of icon-only links under the address. Wrapping, because this column narrows before the others do and a third mark later should drop to a second line rather than push the column wider. */ .site-footer__socials { display: flex; flex-wrap: wrap; gap: var(--pf-space-4); margin-top: var(--pf-space-2); } .site-footer__social { display: inline-flex; align-items: center; } /* 28px, not an em: with the label gone there is no text for the mark to be sized against, and these are the only things in the footer somebody aims a cursor at rather than reads. fill: currentColor keeps the rest — the muted ink at rest, the hover color on hover — as one rule instead of a second color to keep in step. */ .site-footer__social svg { width: 28px; height: 28px; fill: currentColor; flex: none; } .site-footer a { color: var(--pf-color-muted); } .site-footer a:hover { color: var(--pf-color-ink); } .site-footer__brand .brand { color: var(--pf-color-ink); font-size: var(--pf-text-2xl); font-weight: var(--pf-weight-medium); } /* The bottom bar: copyright on one side, the legal links on the other. The strip is deliberately full width so its rule reaches both edges of the page — .site-footer has no inline padding of its own — while the text inside sits in a .container and so lines up with the columns above. */ .site-footer__legal { margin-top: var(--pf-space-8); padding-top: var(--pf-space-3); border-top: 1px solid var(--pf-color-border); font-size: var(--pf-text-xs); } .site-footer__legal-inner { flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pf-space-4); } .site-footer__legal p { margin: 0; } .site-footer__legal-links { display: flex; gap: var(--pf-space-5); } @media (max-width: 40rem) { .site-footer__links { gap: var(--pf-space-6); } }