/* pagefooter.css Fixed footer that stays pinned to the bottom of the viewport without overlapping page content. Works with responsive/flex layouts. Requires: and

. Optional (recommended): the small JS snippet in the template that sets --footer-height. */ :root { /* Fallback height if JS is removed/disabled */ --footer-height: 3rem; } /* Make room for the fixed footer so content never hides behind it */ body.has-fixed-footer { padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px)); } /* Fixed footer */ #footer { position: fixed; left: 0; right: 0; bottom: 0; /* Visuals */ background: #2e2e2e; color: #c9c9c9; border-top: 1px solid rgba(255, 255, 255, 0.15); /* Layout */ box-sizing: border-box; padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); z-index: 1000; /* Compact, single-row legal footer (wraps if needed on small screens) */ display: flex; align-items: center; justify-content: center; } /* Typography inside footer */ /* Footer text */ #footer .copyright { margin: 0; line-height: 1.25; font-size: 0.85rem; text-align: center; max-width: 1100px; } #footer .sep { margin: 0 0.35rem; opacity: 0.65; } /* Scrollable "mission" content that lives in the page body */ .site-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .site-legal .mission { margin: 0; line-height: 1.55; font-size: 0.95rem; color: #cfcfcf; }