/** * Marketing frontend scrollbars — matches dashboard-cinematic purple rail (app shell). * Root scroller is usually (index-clean sets html/body height:100%); body is fallback. */ html.ms-marketing-root, body.dashboard-cinematic-body { --dc-sb-track: rgba(255, 255, 255, 0.06); --dc-sb-thumb: rgba(139, 92, 246, 0.42); --dc-sb-thumb-hover: rgba(167, 139, 250, 0.68); --dc-sb-size: 10px; scrollbar-width: thin; scrollbar-color: var(--dc-sb-thumb) var(--dc-sb-track); } html.ms-marketing-root::-webkit-scrollbar, body.dashboard-cinematic-body::-webkit-scrollbar { width: var(--dc-sb-size); height: var(--dc-sb-size); } html.ms-marketing-root::-webkit-scrollbar-track, body.dashboard-cinematic-body::-webkit-scrollbar-track { background: var(--dc-sb-track); border-radius: 999px; } html.ms-marketing-root::-webkit-scrollbar-thumb, body.dashboard-cinematic-body::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(167, 139, 250, 0.55) 0%, rgba(139, 92, 246, 0.48) 50%, rgba(109, 40, 217, 0.52) 100% ); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } html.ms-marketing-root::-webkit-scrollbar-thumb:hover, body.dashboard-cinematic-body::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(196, 181, 253, 0.75) 0%, rgba(167, 139, 250, 0.65) 50%, rgba(139, 92, 246, 0.62) 100% ); border: 2px solid transparent; background-clip: padding-box; } html.ms-marketing-root::-webkit-scrollbar-corner, body.dashboard-cinematic-body::-webkit-scrollbar-corner { background: #0c0c10; } /* Nested scroll regions: modals, drawers, panels, explore feed, docs, etc. */ html.ms-marketing-root *, body.dashboard-cinematic-body * { scrollbar-width: thin; scrollbar-color: var(--dc-sb-thumb) var(--dc-sb-track); } html.ms-marketing-root *::-webkit-scrollbar, body.dashboard-cinematic-body *::-webkit-scrollbar { width: var(--dc-sb-size); height: var(--dc-sb-size); } html.ms-marketing-root *::-webkit-scrollbar-track, body.dashboard-cinematic-body *::-webkit-scrollbar-track { background: var(--dc-sb-track); border-radius: 999px; } html.ms-marketing-root *::-webkit-scrollbar-thumb, body.dashboard-cinematic-body *::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(167, 139, 250, 0.55) 0%, rgba(139, 92, 246, 0.48) 50%, rgba(109, 40, 217, 0.52) 100% ); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } html.ms-marketing-root *::-webkit-scrollbar-thumb:hover, body.dashboard-cinematic-body *::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(196, 181, 253, 0.75) 0%, rgba(167, 139, 250, 0.65) 50%, rgba(139, 92, 246, 0.62) 100% ); border: 2px solid transparent; background-clip: padding-box; } html.ms-marketing-root *::-webkit-scrollbar-corner, body.dashboard-cinematic-body *::-webkit-scrollbar-corner { background: #0c0c10; } /* Explore preview modal — explicit (overflow panel) */ .ms-explore-modal__panel { scrollbar-gutter: stable; } html[data-theme="light"].ms-marketing-root, html[data-theme="light"].ms-marketing-root body.dashboard-cinematic-body, html[data-theme="light"] body.dashboard-cinematic-body { --dc-sb-track: rgba(15, 23, 42, 0.08); --dc-sb-thumb: rgba(124, 58, 237, 0.38); --dc-sb-thumb-hover: rgba(139, 92, 246, 0.55); } html[data-theme="light"].ms-marketing-root::-webkit-scrollbar-corner, html[data-theme="light"].ms-marketing-root *::-webkit-scrollbar-corner, html[data-theme="light"] body.dashboard-cinematic-body::-webkit-scrollbar-corner, html[data-theme="light"] body.dashboard-cinematic-body *::-webkit-scrollbar-corner { background: #f4f4f8; }