:root { --page-stack-gap: 20px; } /* * Shared vertical-rhythm contract. * * Apply .stack-20 to page shells and to containers whose direct children form * a vertical stack. Script/style/template nodes and hidden UI do not create * phantom gaps. */ .stack-20 > :not(script):not(style):not(template) { margin-top: 0 !important; margin-bottom: 0 !important; } /* * Fixed, full-viewport layers are excluded on both sides -- including the * backdrops Bootstrap APPENDS TO at runtime (.modal-backdrop, * .offcanvas-backdrop), which are the actual dimming sheets and are direct * children of .stack-20 the moment a modal opens. They are fixed, * full-viewport layers: they are not part of the vertical rhythm, but margin * still moves them, so the gap pushed a dimming sheet 20px down the screen -- * an undimmed band at the top and 20px hanging off the bottom, measured on * every app's /pricing loading modal and on the god console's overlays. They * are excluded as a PRECEDING sibling too, since a modal is hidden by a * stylesheet rather than an inline style and would otherwise open a phantom * gap above whatever follows it. */ .stack-20 > :not(script):not(style):not(template):not(.modal):not(.modal-backdrop):not(.offcanvas-backdrop):not(.modal-overlay):not([hidden]):not([aria-hidden="true"]):not([style*="display: none"]):not([style*="display:none"]) ~ :not(script):not(style):not(template):not(.modal):not(.modal-backdrop):not(.offcanvas-backdrop):not(.modal-overlay):not([hidden]):not([aria-hidden="true"]):not([style*="display: none"]):not([style*="display:none"]) { margin-top: var(--page-stack-gap) !important; } /* The visible navbar pill ends at the navbar's content edge. */ .stack-20 > .navbar, .stack-20 > [data-component="navbar"] > .navbar { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* * Keep formerly fixed navbars visible while returning them to document flow, * so their height never has to be duplicated as a content offset. */ .stack-20 > .navbar.fixed-top { position: sticky !important; top: env(safe-area-inset-top, 0); } .stack-20 > .hero-section, .stack-20 > .content-background { min-height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Exact content-to-footer spacing wins over viewport-pinned footers. */ body.stack-20 { min-height: auto !important; } body.stack-20 > .sticky-footer-main { flex: 0 0 auto !important; }