/* SessionM — site footer. Registered in documentation.json under "customCss" next to styles/home.css. Markup lives in help-center.mdx and developer/sessionm-developer-center.mdx. Scoped three ways, so it can never touch another page or another element: :root:has(#welcome-to-the-sessionm-help-center) -> Help Centre home :root:has(#welcome-to-the-sessionm-developer-center) -> Developer Centre home :root:has(.sm-landing) -> Welcome landing (home.mdx) and every selector also carries .sessionm-footer. The landing has its own band and __inner rules (no 100vw pull, no top margin, 1080px measure); the column, link and legal rules are shared. The first two key off ids the platform derives from each page's H2 TEXT, so rewording either heading kills them. The third keys off a class in home.mdx's own markup and has no such dependency; prefer that shape for anything new. THEME: light is the base; dark is applied under :root.dark. The platform runs next-themes with attribute="class", so carries "light" or "dark" -- and with enableSystem the OS preference is already resolved into that class. That is why there is no @media (prefers-color-scheme): it would darken the footer for a dark-OS visitor who has chosen the light theme. FULL BLEED: margin-left/right: calc(50% - 50vw) pulls the band out of the 1280px article column to the full window width, the way a page footer should sit. __inner then re-centres the content on that same 1280px measure. Both home pages set "show-sidebar": false, so there is no sidebar to collide with. */ /* ══════════════════════════════════════════════════════════════════════ Hide the platform's own footer ("Last updated today" / "Built with Documentation.AI") on these two pages only, so it does not stack above the SessionM band. This is the ONE selector in this file that does not carry .sessionm-footer. It is still scoped by :has() to the two home pages, so .dai-footer keeps rendering normally on all 227 other pages. ══════════════════════════════════════════════════════════════════════ */ :root:has(#welcome-to-the-sessionm-help-center) .dai-footer, :root:has(.sm-landing) .dai-footer, :root:has(#welcome-to-the-sessionm-developer-center) .dai-footer { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ Close the gap left under the band. The MDX (and so .sessionm-footer) renders inside div.mt-8.mdx-container, and the platform then emits two more things AFTER it -- from DocumentationPageContent.tsx:
…
<- our footer is the last thing here
<- PageFeedback / PageNavigation / .dai-footer (64px top margin) wrapped in
(40px bottom padding) Hiding .dai-footer removes its content but not that wrapper's margin, so ~104px of blank page was left under the band. These two rules zero both. Scoped by :has() to the two home pages, so every other page keeps its normal spacing, its feedback widget and its page navigation. ══════════════════════════════════════════════════════════════════════ */ :root:has(#welcome-to-the-sessionm-help-center) .dai-article > div:last-child, :root:has(.sm-landing) .dai-article > div:last-child, :root:has(#welcome-to-the-sessionm-developer-center) .dai-article > div:last-child { margin-top: 0 !important; } :root:has(#welcome-to-the-sessionm-help-center) .dai-page-main, :root:has(.sm-landing) .dai-page-main, :root:has(#welcome-to-the-sessionm-developer-center) .dai-page-main { padding-bottom: 0 !important; } /* ── Band ─────────────────────────────────────────────────────────────── */ :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer { display: block !important; margin: 80px calc(50% - 50vw) 0 calc(50% - 50vw) !important; padding: 40px 24px !important; box-sizing: border-box !important; background: #f4f4f6 !important; color: #363747 !important; border-top: 1px solid #e3e3e8 !important; } /* Dark: no band at all. `transparent` lets the page background show through, so the footer can never drift from it the way a hard-coded #3f3d4d did -- that purple sat as an obvious slab against the near-black page. Separation comes from the top rule alone. */ :root.dark:has(#welcome-to-the-sessionm-help-center) .sessionm-footer, :root.dark:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer { background: transparent !important; color: #c9cad4 !important; border-top-color: #2a2a30 !important; } :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__inner, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__inner { max-width: 1280px !important; margin: 0 auto !important; } /* Welcome landing (home.mdx). The article on that page is already full width (home.css lifts the platform's shell cap and side padding), so no 100vw pull is needed -- that pull ignores the vertical scrollbar's width and was leaving a horizontal scrollbar behind. The quote band above ends with 64px of its own padding, so the band sits straight under it, and its content is set on the landing's 1080px measure and gutters (--sm-l-gutter: 32px, 20px below 820px) so its left edge lines up with the hero. Light only, like the rest of that page. */ :root:has(.sm-landing) .sessionm-footer { display: block !important; margin: 0 !important; padding: 40px 0 !important; box-sizing: border-box !important; background: #f4f4f6 !important; color: #363747 !important; border-top: 1px solid #e3e3e8 !important; } :root:has(.sm-landing) .sessionm-footer__inner { max-width: 1080px !important; margin: 0 auto !important; padding: 0 var(--sm-l-gutter, 32px) !important; } /* ── Columns ──────────────────────────────────────────────────────────── */ :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__cols, :root:has(.sm-landing) .sessionm-footer__cols, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__cols { display: flex !important; flex-wrap: wrap !important; gap: 24px 80px !important; } :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__col, :root:has(.sm-landing) .sessionm-footer__col, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__col { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 160px !important; } /* A

, not an

: the platform turns headings into anchor targets and hangs a hover "#" link off them, which has no place in a footer. */ :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__heading, :root:has(.sm-landing) .sessionm-footer__heading, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__heading { margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: #181821 !important; } :root.dark:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__heading, :root.dark:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__heading { color: #ffffff !important; } /* ── Links ────────────────────────────────────────────────────────────── */ :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__links, :root:has(.sm-landing) .sessionm-footer__links, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__links { display: flex !important; flex-direction: column !important; gap: 10px !important; } /* MDX auto-wraps the anchors in a

, so the rule above was stacking ONE child while the links stayed inline inside it -- they rendered on a single row. Confirmed in the served HTML:

......

display:contents removes that

from the layout box tree without removing it from the DOM, so the anchors become direct flex items of __links and pick up the column direction and the 10px gap above. If the platform ever stops inserting the

, this rule simply matches nothing and the layout is unchanged -- it is safe either way. */ :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__links > p, :root:has(.sm-landing) .sessionm-footer__links > p, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__links > p { display: contents !important; } :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer a, :root:has(.sm-landing) .sessionm-footer a, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer a { color: #363747 !important; font-size: 14px !important; line-height: 1.4 !important; text-decoration: none !important; border-bottom: 0 !important; width: fit-content !important; } :root.dark:has(#welcome-to-the-sessionm-help-center) .sessionm-footer a, :root.dark:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer a { color: #c9cad4 !important; } :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer a:hover, :root:has(.sm-landing) .sessionm-footer a:hover, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer a:hover { color: #cf4500 !important; opacity: 1 !important; } :root.dark:has(#welcome-to-the-sessionm-help-center) .sessionm-footer a:hover, :root.dark:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer a:hover { color: #ff884d !important; } /* ── Legal line ───────────────────────────────────────────────────────── */ :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__legal, :root:has(.sm-landing) .sessionm-footer__legal, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__legal { margin: 32px 0 0 0 !important; padding-top: 20px !important; border-top: 1px solid #e3e3e8 !important; font-size: 12px !important; line-height: 1.6 !important; color: #6b6c7b !important; text-wrap: pretty; } :root.dark:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__legal, :root.dark:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__legal { border-top-color: #2a2a30 !important; color: #9d9eab !important; } /* ── Mobile ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer { margin-top: 56px !important; padding: 32px 16px !important; } :root:has(.sm-landing) .sessionm-footer { padding: 32px 0 !important; } :root:has(#welcome-to-the-sessionm-help-center) .sessionm-footer__cols, :root:has(#welcome-to-the-sessionm-developer-center) .sessionm-footer__cols { gap: 28px 40px !important; } }