/* Chain Drain — shared site footer / nav bar. The homepage footer (Figma node 55:160-164), extracted so EVERY page shows the same bar, edited in one place. Markup is injected by js/site-footer.js — to add the bar to a page, include both and nothing else: Depends on tokens.css (--grid-cols / --margin / --gutter / --font-body). */ :root { --pdf-footer-h: 69px; } /* height reserved below page content */ .pdf-footer { --pdf-footer-bg: var(--color-footer-grey); --pdf-footer-ink: #012697; /* deep blue — matches --color-ink */ } /* Research page + dossier pages use the warm paper footer bar (scoped so other pages keep the default grey). Dossier pages are identified by body[data-company] (baked by build_dossier_pages.py). */ body.research .pdf-footer, body[data-company] .pdf-footer { --pdf-footer-bg: var(--color-paper); } .pdf-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; /* above content, hover drawers, old logos */ display: grid; /* Equal tracks: the col-5 logo must not widen its track, or cols 2/3 drift. */ grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: 69px; padding: 12px var(--margin); background: var(--pdf-footer-bg); color: var(--pdf-footer-ink); font-family: var(--font-body); font-size: clamp(16px, 1.6vw, 24px); line-height: 1.2; box-sizing: border-box; } .pdf-footer a { color: inherit; } .pdf-footer__brand { grid-column: 1; font-weight: 700; white-space: nowrap; text-decoration: none; /* links to the homepage; no underline, even on hover */ } .pdf-footer__link { text-decoration: none; /* plain text; underlines only on hover/focus */ white-space: nowrap; } .pdf-footer__link:hover, .pdf-footer__link:focus-visible { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; } .pdf-footer__link--paper { grid-column: 2; } .pdf-footer__link--db { grid-column: 3; } /* Local-only shortcut to /admin/ (see js/site-footer.js) — column 4 is the one free track between the links and the column-5 logo, so adding it moves nothing. */ .pdf-footer__link--admin { grid-column: 4; } /* Link labels have a full + short variant; short is hidden until phones. */ .pdf-label--short { display: none; } .pdf-footer__logo { grid-column: 5; /* logo sits in column 5 (Figma x≈1214, w≈278) */ justify-self: end; display: block; height: 28px; /* fixed size — does not shrink with the window */ } .pdf-footer__logo img { /* the SVG fills the (linked) logo box */ display: block; height: 100%; width: auto; } /* Reserve space so page content isn't hidden behind the fixed bar. Every page the injector touches gets .has-site-footer on . */ body.has-site-footer { padding-bottom: var(--pdf-footer-h); } /* Data-page hover drawers are anchored to the viewport bottom — lift them so they clear the footer instead of hiding behind it. (No-ops on pages w/o drawers.) WIDE LAYOUT ONLY: below 768px the drawers are modal bottom sheets that render in the top layer (above the fixed footer) and must sit flush to the window bottom, so this lift must not apply there — otherwise the sheet floats a footer-height gap off the bottom. Matches home.js's wide() / the sheet's (max-width:768px). */ @media (min-width: 769px) { body.has-site-footer .drawer { bottom: calc(40px + var(--pdf-footer-h)); } body.has-site-footer .drawer--2col:not(.drawer--center), body.has-site-footer .drawer--center, body.has-site-footer .drawer--marquee { bottom: var(--pdf-footer-h); } body.has-site-footer .drawer--marquee { height: calc(100vh - var(--pdf-footer-h)); } } /* ---- small screens: footer collapses to two rows (brand + links, then logo) ---- */ @media (max-width: 768px) { :root { --pdf-footer-h: 110px; } .pdf-footer { grid-template-columns: auto auto auto 1fr; /* brand · link · link · spacer */ column-gap: clamp(14px, 4vw, 24px); row-gap: 12px; } .pdf-footer__brand { grid-row: 1; grid-column: 1; } .pdf-footer__link--paper { grid-row: 1; grid-column: 2; } .pdf-footer__link--db { grid-row: 1; grid-column: 3; } .pdf-footer__link--admin { grid-row: 1; grid-column: 4; justify-self: start; } .pdf-footer__logo { grid-row: 2; grid-column: 1 / -1; /* logo drops to its own line */ justify-self: start; width: auto; height: 19.6px; /* 28px − 30% once the footer stacks */ max-width: 100%; /* shrink only if the row can't hold it */ } } /* ---- phones: shorten link labels so brand + links stay on one line ---- */ @media (max-width: 600px) { .pdf-label--full { display: none; } .pdf-label--short { display: inline; } }