/* ── footer.css ───────────────────────────────────────────────────────────── A thin row of utility links, then the wordmark as an oversized sign-off. [data-foot] on picks how the wordmark is scaled and cropped. ───────────────────────────────────────────────────────────────────────── */ /* Deliberately unboxed: the footer is where the grid lets go, so it carries no rules of its own and the sheet drops its bottom edge behind it. */ .footer { padding-top: var(--s6); } @media (min-width: 48em) { .footer { padding-top: var(--s7); } } .sheet:has(.footer) { border-bottom: 0; } /* ── Utility links ──────────────────────────────────────────────────────── */ .footer-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: var(--s4) var(--gutter); list-style: none; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; } /* padding-inline gives short labels ("Terms", "Privacy") real tap-target width alongside base.css's 44px height floor — without it, width was just the rendered text, which can sit at or under 44px. */ .footer-links a { color: var(--fg-muted); padding-inline: var(--s2); } /* v3 workstream 6 — real build metadata, shown rather than hidden. Not a fabricated version number: "v2" is simply true, this is the v2 rebuild. */ .footer-build { color: var(--fg-faint); cursor: help; } .footer-copy { color: var(--fg-faint); margin-left: auto; } @media (min-width: 48em) { .footer-links { padding: var(--s5) var(--gutter); } } /* ── Wordmark ─────────────────────────────────────────────────────────────── Set in the display face, same lowercase treatment as .nav-wordmark-text (nav.css) — text now, not the old raster PNG lockup, so no per-theme asset/filter is needed: color already follows --fg like everything else. Sized in vw so it keeps spanning ~full container width the way the image (width:100%, height:auto) used to, at roughly the same rendered scale. ───────────────────────────────────────────────────────────────────────── */ .footer-mark { display: block; min-height: 0; /* overrides the 44px tap target on */ overflow: hidden; /* the crop variants bleed past this box */ padding: 0; text-align: center; } .footer-wordmark-text { display: block; white-space: nowrap; /* one line always — the container's own overflow clips it, same as the old image never wrapping */ font-family: var(--font-display); letter-spacing: var(--track-display); line-height: 1; color: var(--fg); /* Deliberately wider than the container: text-align: center on the parent above crops it evenly off both sides, not just the bottom. */ font-size: 34vw; } /* ── A. full — the whole wordmark, edge to edge ─────────────────────────── */ [data-foot="full"] .footer-mark { padding: var(--s6) var(--gutter) var(--s5); } /* ── B. crop — oversized, the baseline running off the bottom of the page ── The default: pages without a lab bar (contact, login, subscribe, faq, bundles, every product page) never set [data-foot], so they need to match the homepage's default choice on their own rather than falling back to unstyled. ─────────────────────────────────────────────────────────────── */ .footer-mark { padding: var(--s6) var(--gutter) 0; } .footer-wordmark-text { margin-bottom: -16%; } /* ── C. bleed — wider than the page, cropped left, right and bottom ─────── */ [data-foot="bleed"] .footer-mark { padding: var(--s6) 0 0; } [data-foot="bleed"] .footer-wordmark-text { width: 124%; margin-left: -12%; margin-bottom: -10%; } /* ── D. half — only the top half of the wordmark shows ──────────────────── */ [data-foot="half"] .footer-mark { padding: var(--s6) var(--gutter) 0; } [data-foot="half"] .footer-wordmark-text { margin-bottom: -22%; }