/* Site-wide footer: legal-link chrome on every public page. Lives in the body grid's second row (1fr auto from layout.css), so it sits below main without pushing into the viewport-fixed bottom tab bar. Tab bar's safe-area padding still works because the footer is in normal flow above it. */ @layer components { .site-footer { /* Span both columns of the body grid on desktop. Without this, auto-placement parks the footer in the implicit r2c1 cell (sidebar-width = 80px), stacking the legal links vertically and making the rail scrollable. Single-column mobile grid treats `1 / -1` as a no-op. */ grid-column: 1 / -1; /* Match the mobile tab-bar bottom inset so the footer doesn't hide under it. Desktop hides the tabbar, so no inset is added there. Marketing shell has no tabbar at any viewport, so the #325 override below collapses the inset to a plain space-6 -- keeps / composing inside 100dvh. */ padding-block: var(--space-6); padding-block-end: calc(var(--tab-bar-height) + var(--space-6)); padding-inline: var(--space-page); border-block-start: 1px solid color-mix(in oklch, var(--md-border-muted) 70%, transparent); background: var(--md-surface-container-low); color: var(--md-on-surface-variant); font-size: var(--text-sm); } /* Marketing shell never renders the bottom tab bar, so the footer doesn't need to reserve room for it. Removes ~56px of dead space at the bottom of /, contributing to the 100dvh composition target for bug #2 fix. */ body[data-shell="marketing"] .site-footer { padding-block-end: var(--space-6); } .site-footer__inner { max-inline-size: var(--content-max); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .site-footer__copyright { margin: 0; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); } .site-footer__links a { color: var(--md-on-surface-variant); text-decoration: none; transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects); } .site-footer__links a:hover { color: var(--md-on-surface); text-decoration: underline; } .site-footer__links a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } /* Footer shows on PUBLIC surfaces only — homepage, public recipe browsing, author hubs, the legal pages themselves. Hidden on the authed app shell (/me, /saved, /plan, /add) where chrome-y microtype competes with content, and on the auth shell where it would distract from the magic-link flow. NavItem is the page-data field that drives the sidebar's active state; reusing it as data-nav on gives the footer the same hook without a second template variable. § 512(c)(2) discoverability is preserved: third-party copyright holders almost always land on a public recipe URL (search results, shared links), and signed-in users have a Legal row inside /me. #325 also adds the data-shell="auth" hook so the auth shell hides the footer via the same hook the app shell uses; the legacy :has(.signin, .signin-sent) selector below is retained as defense-in-depth for any future auth surface that doesn't carry .signin* root classes. */ body:is([data-nav="saved"], [data-nav="plan"], [data-nav="add"], [data-nav="profile"]) .site-footer, body[data-shell="auth"] .site-footer, body:has(.signin, .signin-sent) .site-footer { display: none; } @media (min-width: 1024px) { /* Desktop: no tab bar to clear, so the bottom padding tightens up. */ .site-footer { padding-block-end: var(--space-6); } } }