/* THE AUTO-HIDING FOOTER — SITE FURNITURE (W396). * * Manu, 2026-08-28: "we can have the same auto-hide footer for tools as well. * So make it a standard like the website header, tool header, side drawer and * the auto-hiding footer. It should have the same layout and same behaviour * across all tools and references." * * So it joins the list. Four things were already furniture — the header macro, * the footer macro, the related drawer and hpfas-theme.css — and this is the * fifth: not the footer itself, which was always shared, but the WAY it behaves * on a page that hosts a tool or a table. * * It used to live in `reference-table.css`, which meant only the reference * pages had it. The Pay-Revision and MR-Claim pages carried a footer standing * permanently across the bottom of the work area, and the mounted Pensionary * Benefits tool the same — three tools behaving differently from four tables * for no reason a user could see. * * WHY A FOOTER HIDES ON THESE PAGES AND NOWHERE ELSE. A marketing page is read * top to bottom and its footer is the end of the reading. A tool page is a * WORKSPACE: everything on it is meant to be on screen at once, and a band of * social icons parked across the bottom is taking room from the work while * saying nothing the reader came for. Taking it out of the flow gives that room * back, and on the reference tables it is also the only way to have both a * non-scrolling page (so the header row cannot be dragged out from under the * sub-bar, W331) and a footer that is still reachable. * * APPLIES BY SHAPE, NOT BY LIST. The rules bite on any page carrying an `.app` * container — the tool/table shell — which is the same marker `related-drawer.js` * anchors to. A new tool therefore inherits this with no per-page work and no * name to add anywhere, which is the whole point of calling it furniture. */ /* On :root, not on `.hpfas` — the mounted Pensionary Benefits tool renders a standalone document that this class does not wrap, and a lip of `0` there would put the footer entirely off screen with no way to reach it. */ :root { --ft-lip: 7px; } /* Both parents on purpose: a page extending base.html has the footer inside `.hpfas`; the mounted tool has it as a direct child of . */ .hpfas:has(.app) > footer, body:has(.app) > footer { position: fixed; left: 0; right: 0; bottom: 0; /* ABOVE THE DRAWER (Manu, 2026-08-28: "the footer should overlap the side drawer also, because it would take preference over any other item when it is being displayed"). The drawer's panel sits at 120 and its scrim at 118, so the rail — which is the panel's own right edge — was painting over the raised footer and clipping the first 34px of every line in it. Anything a reader has deliberately pulled up outranks a rail that is merely parked. */ z-index: 130; /* Parked: only the lip shows. That lip is the affordance — nothing has to be clicked and nothing has to be remembered. */ transform: translateY(calc(100% - var(--ft-lip))); box-shadow: 0 -6px 22px rgba(0, 0, 0, .13); transition: transform .22s ease; } .hpfas:has(.app) > footer:hover, .hpfas:has(.app) > footer:focus-within, body:has(.app) > footer:hover, body:has(.app) > footer:focus-within { transform: translateY(0); } /* Keyboard users reach it by tabbing, which `:focus-within` covers; motion is the only thing this preference is about, not the hiding. */ @media (prefers-reduced-motion: reduce) { .hpfas:has(.app) > footer, body:has(.app) > footer { transition: none; } } /* THE LIP MUST NEVER SIT ON TOP OF CONTENT. The footer is out of the flow, so the page has to give back exactly the height that still shows. `.body-row` is the content row every tool shares; the reference tables use `.ref-wrap` instead and pad it themselves in `reference-table.css`, off this same token, because there the inset has to fall inside the scroller. */ .hpfas:has(.app) .app > .body-row, body:has(.app) .app > .body-row { padding-bottom: var(--ft-lip); } /* A tool that uses neither container still must not be sat on. */ .hpfas:has(.app) .app:not(:has(> .body-row)):not(:has(> .ref-wrap)), body:has(.app) .app:not(:has(> .body-row)):not(:has(> .ref-wrap)) { padding-bottom: var(--ft-lip); }