/** * UI Wrapper — main content column (#noadcontent.uiw-maincontent) and related layout. * Loaded only when useUiWrapper is true (layHeader3.cfm). * * --------------------------------------------------------------------------- * Workspace modes (avoid one-off fixes that fight each other) * --------------------------------------------------------------------------- * * layMember3: .mainbody > .container holds floated #protoolsbar + main column. * - No side ad (typical paid / no-ad): #noadcontent.member-blocks--maincontent (+ .uiw-maincontent when wrapper on). * - With side ad: #memPgCenter (+ wide/narrow classes) and #memPgRight — separate width math; not #noadcontent. * * A) Responsive member pages — header.responsive (plain , no .uiw-member-nonresponsive) * - Desktop: physical workspace rail (#protoolsbar) beside main; same rail math as legacy. * - Mobile: legacy _layMember.scss hides #protoolsbar only below 768px; from 768px–991px the * rail can still sit beside #noadcontent. --uiw-rail-beside-main stays 89px there so floats * do not stack. Only at max-width 767px do we set rail to 0 (hamburger / hidden rail). * * B) Non-responsive member pages — useUiWrapper && !header.responsive * - body.uiw-member-nonresponsive (see layHeader3.cfm). Shrunk-desktop presentation. * - Mobile: rail stays beside content; --uiw-rail-beside-main is 89px (74px rail + 15px gap * per uiWrapper-sidenav.cfm). #noadcontent must not use width:100% or it stacks under the rail. * * Container horizontal padding is accounted for via box-sizing:border-box on these elements; * mobile container max-width differs by mode so we do not squeeze (B) into the same 850px cap * meant for (A) full-bleed cards. * * Desktop max-width (see body tokens): * - --uiw-desktop-container-max-responsive: full responsive member pages (plain ); wider * MFE-like scale. Sized so #memPgCenter.member-blocks--maincontent-narrow (calc(100% − narrow * subtract)) stays ≥ --uiw-desktop-main-content-max (925px) given current subtracts. * - --uiw-desktop-container-max-nonresponsive: body.uiw-member-nonresponsive or .accommodate-992; * raising the responsive max above ~1048px can break float layout (rail + main stack) on these. * * Exceptions: .uiw-trial-banner (sibling of #noadcontent); rules targeting .mainbody > .container. * * Sign up builder (laySignup3): wizard lives in .mainbody without #noadcontent — scope those * overrides with header.uiw-header ~ .mainbody (header.uiw-header only when useUiWrapper). */ /* Rail width matches #protoolsbar.uiw-sidenav: 74px + 15px margin-right */ body { --uiw-rail-beside-main: 89px; --uiw-mobile-container-max-responsive: 850px; --uiw-mobile-container-max-nonresponsive: 980px; /* No side ad: max width of #noadcontent.uiw-maincontent main column (business rule: ≥ 925px). */ --uiw-desktop-main-content-max: 925px; /* * #memPgCenter width = calc(100% − subtract); see scss/components/_member-navigation.scss. * Responsive container max must be ≥ main-content-min + narrow subtract (925 + 430 = 1355) or * the narrow-ad path dips below 925px. Tune these together if MFE outer width changes. */ --uiw-desktop-main-with-side-ad-subtract-wide: 290px; --uiw-desktop-main-with-side-ad-subtract-narrow: 430px; /* Shrink / non-responsive layouts: do not raise (float rail + main stack above ~1048px). */ --uiw-desktop-container-max-nonresponsive: 1048px; /* Full responsive member pages only (see desktop @media; overrides non-responsive body). */ --uiw-desktop-container-max-responsive: 1355px; } /* ============================================================================= * MOBILE (max-width 991px) — workspace + container + main card * ============================================================================= */ @media (max-width: 991px) { /* * Mode (A) only: zero rail when legacy layout hides #protoolsbar (viewport ≤767px). * Do not apply to 768–991: sidenav can still be beside main; rail 0 + width:100% on #noadcontent * stacks floats (AED, PG activation, etc. when body matches (A) — e.g. lockMedium false + responsive). */ @media (max-width: 767px) { body:not(.uiw-member-nonresponsive) { --uiw-rail-beside-main: 0px; } } .mainbody > .container::after { content: ""; display: table; clear: both; } /* (A) Responsive: card-style column; cap matches other ui-wrapper mobile pages */ body:not(.uiw-member-nonresponsive) .mainbody > .container { width: 100%; max-width: var(--uiw-mobile-container-max-responsive); min-width: 0; padding-left: 12px; padding-right: 12px; box-sizing: border-box; } /* (B) Non-responsive: shrunk desktop; allow a wider row than 850px so rail + main are not squeezed */ body.uiw-member-nonresponsive .mainbody > .container { width: 100%; max-width: var(--uiw-mobile-container-max-nonresponsive); min-width: 0; padding-left: 12px; padding-right: 12px; box-sizing: border-box; } /* * #noadcontent width: calc(100% - var(--uiw-rail-beside-main)). Default 89px; (A) uses 0 only * when nested max-width 767px block above zeroes the token (hidden rail). */ .mainbody > .container > #noadcontent.uiw-maincontent.member-blocks--maincontent { width: calc(100% - var(--uiw-rail-beside-main)) !important; box-sizing: border-box; } /* Non-responsive fuses — card shell */ .accommodate-992 .uiw-maincontent { padding: 32px; gap: 18px; margin-bottom: 0; border-radius: var(--border-radius-xl, 16px); background-color: var(--White, #FFF); box-shadow: 0 2px 3px 0 rgba(18, 18, 23, 0.07); } .accommodate-992 .uiw-trial-banner.member-blocks--maincontent { width: var(--uiw-mobile-container-max-responsive); } /* Responsive member pages — card shell */ body:not(.accommodate-992) .uiw-maincontent { display: flex; width: 100%; max-width: var(--uiw-mobile-container-max-responsive); box-sizing: border-box; padding: 32px 16px; flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 32px; border-radius: 15px; background-color: var(--surface-0, #FFF); box-shadow: 0 2px 3px 0 rgba(18, 18, 23, 0.07); } body:not(.accommodate-992) .uiw-trial-banner.member-blocks--maincontent { width: 100%; max-width: 100%; box-sizing: border-box; } .uiw-trial-banner__inner { flex-wrap: wrap; padding: 16px 12px; row-gap: 12px; } .uiw-trial-banner__text { flex: 1 1 calc(100% - 44px); min-width: 0; } .uiw-trial-banner__cta { flex: 1 1 100%; width: 100%; justify-content: center; } /* * Wizard — mobile: extend #w1-desc containment (desktop rules live in @media min-width 992px below). * .uiw-maincontent = member shell; header.uiw-header ~ .mainbody = sign up builder (no uiw-maincontent). */ .uiw-maincontent .l-wizard-step-1, header.uiw-header ~ .mainbody .l-wizard-step-1 { min-width: 0; max-width: 100%; box-sizing: border-box; } .uiw-maincontent #w1-desc-parent-ui, header.uiw-header ~ .mainbody .l-wizard .l-wizard-step-1 #w1-desc-parent-ui, header.uiw-header ~ .mainbody .l-wizard-step-1 #w1-desc-parent-ui { display: block; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; } .uiw-maincontent .l-wizard .l-wizard-step-1 #w1-desc-parent-ui p:last-child, .uiw-maincontent .l-wizard-step-1 #w1-desc-parent-ui p:last-child, .uiw-maincontent .l-wizard .l-wizard-step-1 #w1-desc-parent-ui .description:last-child, .uiw-maincontent .l-wizard-step-1 #w1-desc-parent-ui .description:last-child, header.uiw-header ~ .mainbody .l-wizard .l-wizard-step-1 #w1-desc-parent-ui p:last-child, header.uiw-header ~ .mainbody .l-wizard-step-1 #w1-desc-parent-ui p:last-child, header.uiw-header ~ .mainbody .l-wizard .l-wizard-step-1 #w1-desc-parent-ui .description:last-child, header.uiw-header ~ .mainbody .l-wizard-step-1 #w1-desc-parent-ui .description:last-child { display: block; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; } @media (max-width: 767px) { /* * Slide-down panels (SUGstyleV3 _modals.scss): on mobile, width:100% is the main * column (~400px), not the screen, and desktop left:50% + translate(-50%) still * influences layout — the panel is clipped on the right. Break out to the viewport * (CSS-Tricks full-bleed: left/right 50% + negative vw margins; kill desktop transform). */ .uiw-maincontent .slide-down-panel { width: auto !important; max-width: none !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; transform: none !important; box-sizing: border-box; } /* * Theme design: grid minmax so 3 columns + gap do not overflow. */ header.uiw-header ~ .mainbody .slide-down-panel.mobile-theme-picker { overflow-x: hidden; } header.uiw-header ~ .mainbody .l-wizard .l-wizard-step-1 .mobile-theme-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } } /* Trial countdown strip — same float column as #noadcontent.uiw-maincontent (sidebar 74px + 15px margin) */ .uiw-trial-banner.member-blocks--maincontent { box-sizing: border-box; --primary-500: #f68b1c; float: left; position: relative; min-height: 1px; padding: 0; margin-bottom: 18px; border-radius: 12px; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(9, 7, 0, 0.04); } .uiw-trial-banner[hidden] { display: none !important; } .uiw-trial-banner__inner { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 18px 12px; } .uiw-trial-banner__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .uiw-trial-banner__icon .fa-regular { font-size: 25.6px; line-height: 1; width: 1em; height: 1em; display: block; color: var(--primary-500, #f68b1c); } .uiw-trial-banner__text { flex: 1 1 auto; margin: 0; min-width: 0; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: #2a2a2a; } .uiw-trial-banner__text strong { font-weight: 900; } .uiw-trial-banner__cta { flex-shrink: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 19px; border-radius: 8px; border: 1px solid #f16622; background-color: #fff; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; color: #f16622; text-decoration: none; white-space: nowrap; } .uiw-trial-banner__cta:hover, .uiw-trial-banner__cta:focus { color: #f16622; text-decoration: none; background-color: rgba(241, 102, 34, 0.06); } /* * Patterns that use z-index: -1 on a full-bleed image (e.g. SUGstyleV2 .hero-content * .hero-image; page CSS .how-it-works .how-it-works-image) can paint beneath the * wrapper's opaque background without a local stacking context. isolation keeps those * subtrees composited above the white card (#noadcontent.uiw-maincontent). */ .uiw-maincontent .hero-content, .uiw-maincontent .how-it-works { isolation: isolate; } /* * #noadcontent.uiw-maincontent is a column flex container with align-items: flex-start (desktop) * or stretch (mobile, max-width 991px). Flex items default to shrink-to-fit on the cross axis; only stretching them * makes Bootstrap grids and block layouts use the full card width. */ .uiw-maincontent > .row { align-self: stretch; width: 100%; box-sizing: border-box; } /* * CF pages often omit a top-level .row (e.g. dspSignUpMemberManagementR2: alerts, header divs, * .tabpanel-signedup). Those direct
s were flex items with intrinsic width — tables with * narrow cells then looked like a ~60% strip inside the white card. */ .uiw-maincontent > div:not(.row) { align-self: stretch; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* * Headings as direct flex children: SUGstyleV3 _typography.scss sets `margin: 5px auto` on * h1–h3 (and .h1–.h3). In normal block flow auto left/right margins are no-ops, but inside * the wrapper card (display:flex column) they steal the cross-axis free space and center the * heading regardless of align-items: flex-start / stretch — that's why dspMyReports "Reports", * dspMemberProfile "Settings", and dspMyPurchases "Billing" / "Active Products" appear centered * only when useUiWrapper is on. Same pattern as the .uiw-maincontent > div:not(.row) rule above. */ .uiw-maincontent > h1, .uiw-maincontent > h2, .uiw-maincontent > h3, .uiw-maincontent > h4, .uiw-maincontent > h5, .uiw-maincontent > h6 { align-self: stretch; margin-left: 0; margin-right: 0; } /* * Trial-link CTA (#trialLink, populated by /js/trialLink.js) is placed as a sibling just before * the page

on Reports / Volunteer / SignupStats / Messages / Tools / etc. and carries * `btn-freetrial pull-right btn`. The intent is to float:right next to the heading; under * the wrapper's flex column that float is ignored, the .uiw-maincontent > div:not(.row) rule * above stretches the div to full width, and Bootstrap's .btn class then centers the inner * anchor (text-align:center). Honor the pull-right intent in flex terms instead. */ .uiw-maincontent > #trialLink { align-self: flex-end; width: auto; max-width: 100%; } /* * AED header uses floats inside .uiw-page-signup-member-mgmt; ancestor flex does not clear them. * Contain floats so the following blocks (title, tabs, table) do not overlap or clip horizontally. */ .uiw-maincontent .uiw-page-signup-member-mgmt { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .uiw-maincontent .uiw-page-signup-member-mgmt::after { content: ""; display: table; clear: both; } .uiw-maincontent .uiw-page-signup-member-mgmt-title { margin-top: -42px; } /* LumaPay / Collect Money shell: fill the white card (avoid nested .container max-width gaps). */ .uiw-maincontent #main { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ============================================================================= * DESKTOP (min-width 992px) — main card, wizard, publish preview * ============================================================================= */ @media (min-width: 992px) { /* * Default: MFE-scale width on responsive circuits (plain body). Non-responsive / lockMedium * bodies need the lower cap — see tokens in body{}. */ .mainbody > .container { width: var(--uiw-desktop-container-max-responsive); max-width: var(--uiw-desktop-container-max-responsive); } body.uiw-member-nonresponsive .mainbody > .container, body.accommodate-992 .mainbody > .container { /* width: var(--uiw-desktop-container-max-nonresponsive); */ max-width: var(--uiw-desktop-container-max-nonresponsive); } #announcementBar-btspromo9204.convert-special-banner { margin-left: 40px; margin-right: 40px; } .uiw-maincontent { display: flex; padding: 10px 10px 10px 20px; flex-direction: column; align-items: flex-start; column-gap: 18px; margin-bottom: 40px; border-radius: var(--border-radius-xl, 16px); background-color: var(--White, #FFF); box-shadow: 0 2px 3px 0 rgba(18, 18, 23, 0.07); } .accommodate-992 .uiw-maincontent { margin-bottom: 0; } .member-blocks--maincontent-wide.uiw-maincontent { width: calc(100% - var(--uiw-desktop-main-with-side-ad-subtract-wide)); } .member-blocks--maincontent-narrow.uiw-maincontent { width: calc(100% - var(--uiw-desktop-main-with-side-ad-subtract-narrow)); } .uiw-maincontent { box-sizing: border-box; max-width: 100%; } .uiw-maincontent > sug-root { display: block; align-self: stretch; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .uiw-maincontent sug-feature-created-page { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .uiw-maincontent .l-wizard.row, .uiw-maincontent #signupWizardContainer.l-wizard { max-width: 100%; min-width: 0; box-sizing: border-box; } .uiw-maincontent .l-wizard-step-1 { min-width: 0; max-width: 100%; box-sizing: border-box; } .uiw-maincontent #w1-desc-parent-ui { display: block; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; } .uiw-maincontent .l-wizard .l-wizard-step-1 #w1-desc-parent-ui p:last-child, .uiw-maincontent .l-wizard-step-1 #w1-desc-parent-ui p:last-child, .uiw-maincontent .l-wizard .l-wizard-step-1 #w1-desc-parent-ui .description:last-child, .uiw-maincontent .l-wizard-step-1 #w1-desc-parent-ui .description:last-child { display: block; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; } .uiw-maincontent .w1-slidez-main { min-width: 0 !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .uiw-maincontent .upload--tabtable { min-width: 0; max-width: 100%; box-sizing: border-box; } .uiw-maincontent .l-wizard-step-4 .col-md-12.preview { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .uiw-maincontent .l-wizard-step-4 .signup-preview-wrapper-desktop-scaled { width: 100%; max-width: 850px; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* * No-ad column (#noadcontent.uiw-maincontent) + trial banner: match rail width at every desktop * breakpoint. Legacy .member-blocks--maincontent uses float + calc(100% - 100px); UI rail is 89px * (uiWrapper-sidenav). display:flex on .uiw-maincontent suppresses float, so without this rule * the main column mis-sized above 1199px (grey gutter or horizontal clip on wide viewports). */ .uiw-maincontent:not(.member-blocks--maincontent-wide):not(.member-blocks--maincontent-narrow), .member-blocks--maincontent.uiw-trial-banner { width: calc(100% - var(--uiw-rail-beside-main)); max-width: var(--uiw-desktop-main-content-max); } .mainbody > .container:has(#noadcontent.member-blocks--maincontent.uiw-maincontent) { padding-left: 0; padding-right: 0; width: calc(var(--uiw-desktop-main-content-max) + var(--uiw-rail-beside-main)); max-width: calc(var(--uiw-desktop-main-content-max) + var(--uiw-rail-beside-main)); } } /* * Sign-up builder (#wizardView): relocatePullDown() sets --desktop-top-ad-offset from * header offsetHeight + section.mktg-area.top. UI Wrapper renders the Embla promo * (.uiw-mktg-banner) as a sibling after (see uiw-header-markup.cfm), so it is * not part of document.querySelector("header") and was not included in the JS sum. * Add that stack height on tablet/desktop only; max-width 767px slide-down rules stay as-is. * * Offset aligns with uiWrapper-header.css: .uiw-mktg-banner__inner min-height 60px + * vertical padding 12px + small buffer for one-line promos. */ @media (min-width: 768px) { .mainbody #wizardView .slide-down-panel { top: calc(var(--desktop-top-ad-offset, -20px) + 88px); } } .uiw-maincontent { min-height: 600px; } /* * Admin — Back End Log (dspBackEndLogs.html): scoped via .uiw-page-admin-backend-log only. * Page-local