/* ============================================================================ Standard application footer (Footer.ascx) — single shared stylesheet. Used on every page, master-page-driven or standalone, so the footer looks and behaves identically everywhere (see Footer.ascx for the markup). Sticky-footer layout: the page's

is given min-height:100vh and made a flex column; .app-footer uses margin-top:auto so it sits flush at the bottom of the viewport on short pages and is pushed below the content (never overlapping, never fixed over it) on long pages that scroll. This only requires .app-footer to be the LAST child of — it does not depend on any particular markup above it, so the same two rules work for Site.master (sidebar + header layout) and for the simple standalone pages (login, popups, print, tracking) alike. ============================================================================ */ html, body { height: 100%; } /* Opt-in sticky-footer layout. Add class="sticky-footer-page" to on any page whose is (or can be treated as) a plain top-to- bottom flow: the footer then sits flush at the bottom of the viewport when content is short, and is pushed below the content (never overlapping, never truly position:fixed) once content grows past the viewport. Pages that already center a single card in the viewport (login, forgot password, OTP screens, etc.) do NOT use this class — they get a two-line, page-local tweak instead (flex-direction:column on body + margin:auto on the card) so their existing vertical-centering keeps working alongside the footer. See Footer.ascx for the control both approaches render. */ body.sticky-footer-page { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } body.sticky-footer-page > form { display: flex; flex-direction: column; flex: 1 0 auto; } .app-footer { flex-shrink: 0; margin-top: auto; width: 100%; background: linear-gradient(90deg, #173573 0%, #0f244f 100%); border-top: 3px solid #ec7d30; color: #eef1f6; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; box-sizing: border-box; } .app-footer * { box-sizing: border-box; } .app-footer .af-inner { max-width: 1400px; margin: 0 auto; padding: 10px 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .app-footer .af-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; width: 100%; } .app-footer .af-brand { font-size: 12.5px; color: #fff; } .app-footer .af-copy { display: inline-flex; align-items: center; gap: 6px; } .app-footer .af-copy i { color: #ec7d30; } .app-footer .af-company { font-weight: 600; } .app-footer .af-sep { color: rgba(255,255,255,.35); } .app-footer .af-meta { display: inline-flex; align-items: center; gap: 6px; color: #cfd6e6; } .app-footer .af-meta i { color: #ec7d30; } .app-footer .af-dot { color: rgba(255,255,255,.4); margin: 0 2px; } .app-footer .af-links { font-size: 12px; } .app-footer .af-link { display: inline-flex; align-items: center; gap: 5px; color: #cfd6e6; text-decoration: none; padding: 2px 4px; border-radius: 4px; transition: color .15s ease, background .15s ease; } .app-footer .af-link i { color: #ec7d30; font-size: 11px; } .app-footer .af-link:hover, .app-footer .af-link:focus { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; outline: none; } .app-footer .af-link-sep { color: rgba(255,255,255,.25); } /* Tablet: stack the two rows a little tighter */ @media (max-width: 992px) { .app-footer .af-inner { padding: 10px 16px; } } /* Mobile / narrow popup windows: stack every item on its own line, centered */ @media (max-width: 600px) { .app-footer .af-row { flex-direction: column; gap: 4px; } .app-footer .af-sep { display: none; } .app-footer .af-links { display: flex; flex-direction: column; gap: 4px; } .app-footer .af-link-sep { display: none; } } /* Never let the footer's marketing/legal chrome print onto invoices, PODs, Crystal/RDLC reports or any other document generated by a print-only page. */ @media print { .app-footer { display: none !important; } }