/* Shared FOOTER chrome (Q143) — the design-system styling for the site-footer.js component, so the footer renders pixel-identical on interior pages that DON'T load landing.css (map/, seats/, commissioner/, impact/, …). These rules are the canonical copy of the footer block that also lives in landing.css for the homepage's hardcoded footer; tokens only (no raw hex), reuses .lwrap/.eyebrow from styles.css. Loading this everywhere with a shared header (styles.css) means no page renders raw chrome. */ /* Broad-daylight reskin — the marketing footer is white with a 1px --line top rule (the chunky 2px ink keyline is retired on marketing). The app footer (.lfoot--app, Q781) restores its own compact chrome below so the copilot tools are untouched. */ .lfoot{border-top:1px solid var(--line);background:var(--surface)} /* §3 footer — brand block (logo + program line) LEFT · the three link columns RIGHT, on one row (mock 5a). The marketing footer matches the GLOBAL 1040 page frame so it aligns with the nav + content on every page. .lwrap's max-width lives in landing.css (home only) — define it here too so interior pages that don't load landing.css still get the 1040 footer frame. Content inset uses var(--gutter) so the footer brand lines up with the gutter-inset nav (both 40px in). Only the app footer widens to the 1280 tool frame. */ .lfoot .lwrap{max-width:var(--maxw-wide);margin-inline:auto} .lfoot .lwrap.lfoot--app{max-width:var(--maxw-app)} .lfoot-in{display:flex;align-items:flex-start;gap:56px;padding:64px var(--gutter) 40px} .powered{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-2);margin:0 0 8px} /* §3 footer — wordmark lockup + program line (brand block; ONLY these two, nothing below), + legal/© row */ .foot-brand{flex:0 0 auto;max-width:260px} .foot-wordmark{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none} .foot-wordmark .spark{width:22px;height:22px} .foot-wordmark:hover{color:var(--accent-strong)} .foot-program{margin:14px 0 0;font-size:15px;color:var(--muted);line-height:1.5;max-width:24ch} .foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:8px;padding:20px var(--gutter) 8px} .foot-legal p{margin:0;font-size:13px;color:var(--muted);line-height:1.5} .lfoot--app .foot-legal{display:none} .foot-note{font-size:13px;color:var(--muted);max-width:46ch;margin:0;line-height:1.5} /* links darken toward --accent-strong on hover (reskin §3 footer) */ .lfoot .foot-col .link:hover,.lfoot .foot-links a:hover{color:var(--accent-strong)} .foot-feedback{margin:10px 0 0} /* Q100 — product-planning credit line, footer type + tokens. Q121 — hidden by default (config flag OFF); site-footer.js adds .footer-credit-on to when QA_FOOTER_CREDIT_SHOW=true. Keeping the hide rule here means credits stay hidden on interior pages too (the "credits showing on /map/" bug). */ .foot-credit{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5;display:none} .footer-credit-on .foot-credit{display:block} .foot-links{display:flex;gap:20px;align-items:flex-start} .foot-links a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none} .foot-links a:hover{color:var(--accent)} /* Footer columns — 4 cols >760, 2 cols 560-760, 1 col <560 (headers kept; Q221 canonical breakpoints) */ .foot-cols{flex:1 1 0;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 40px} @media (max-width:760px){ .lfoot-in{flex-direction:column;gap:32px} .foot-cols{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .foot-cols{grid-template-columns:1fr} } .foot-colhead{margin:0 0 8px;opacity:.85} .foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .foot-col li{line-height:1.25} .foot-col .link{display:inline-block;padding:3px 0;min-height:24px} /* Q781 — the APP footer: a quiet, distinct chrome for the copilot tools (no marketing funnel columns). The Broad-daylight reskin is marketing-only, so the app footer restores its own paper ground + ink keyline here (the shared .lfoot base above is now the white marketing footer). */ .lfoot--app{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px var(--gutter);background:var(--paper);border-top:2px solid var(--ink)} .lfoot--app .powered{margin:0} .lfoot--app .foot-links{display:flex;gap:18px;flex-wrap:wrap}