/* * sslcom-rails host override for Banjo auth pages. * * The legacy application layout wraps page content in * body > #wrapper > #container > .content > .containerl > .inner * each an opaque/whiteish box. The reskin paints its gradient on the * canvas (shared banjo_auth.css), so those wrappers must be transparent for the * gradient to show through; otherwise the panel sits on a white column. Also * drop the sticky-footer spacer (.push), which would leave a blank strip below * the content once #footer is hidden. * * `:has()` scopes every rule to pages that actually contain a .banjo-page, so * all other legacy pages using the same wrappers are untouched. * * Kept OUT of build/banjo_auth/input.css (that entry is byte-identical to * login_ssl_com, a host with no such wrapper) and served statically from * public/banjo alongside banjo_auth.css. */ body:has(.banjo-page), body:has(.banjo-page) #wrapper, body:has(.banjo-page) #container, body:has(.banjo-page) .content, body:has(.banjo-page) .containerl, body:has(.banjo-page) .inner { background: transparent !important; } /* The legacy shell (sass/main.sass, sass/master.sass) pins `.inner{width:1024px}` and `.content{width:960px}`, and — the reason the panel sits LEFT instead of centered — `.containerl{display:inline-block}`, which shrink-wraps to content and left-aligns under the ancestor `text-align:left`. Make the whole chain a fluid full-width block so `.banjo-page`'s flex centering actually centers the panel and it stays responsive below 1024px. `min-width:0` (incl. on , which sass/main.sass pins to 980px) is what lets these pages shrink to fit narrow/mobile viewports the way the login page does. */ body:has(.banjo-page), body:has(.banjo-page) #wrapper, body:has(.banjo-page) #container, body:has(.banjo-page) .content, body:has(.banjo-page) .containerl, body:has(.banjo-page) .inner { min-width: 0 !important; } body:has(.banjo-page) #container, body:has(.banjo-page) .content, body:has(.banjo-page) .containerl, body:has(.banjo-page) .inner { display: block !important; width: auto !important; max-width: 100% !important; overflow: visible !important; } body:has(.banjo-page) .push { display: none !important; } /* * Hide the legacy RA site chrome on banjo auth pages so the reskinned panel * stands alone (login_ssl_com's minimal layout has no such chrome). The header * markup differs by shell: `#header` is the classic dark nav (layouts/_public_new); * `header.modern-pub-header` (+ its mobile menu) is the modern nav * (layouts/_public_modern) — hide both since anon registration can render either * depending on `modern_public_header?`. `#footer` covers both shells. */ body:has(.banjo-page) #header, body:has(.banjo-page) .modern-pub-header, body:has(.banjo-page) .modern-pub-mobile-menu, body:has(.banjo-page) #footer { display: none !important; } /* * The legacy flash bar (shared/_messages → .flash_message) renders in the dead * 1024px column, mis-colored and offset from the panel. Hide it on all banjo * pages; flash messages are re-surfaced inside the panel as a .banjo-alert via * shared/_banjo_flash. */ body:has(.banjo-page) .flash_message { display: none !important; }