/** * Course focus mode — wide content, hidden course tabs / drawers. */ /* —— Floating focus button (middle of footer stack) —— */ /* Default colours come from .bg-secondary (same as help / back-to-top). */ .btn-footer-course-focus { border: none !important; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); } .btn-footer-course-focus .fa { color: inherit; } .theme-custom-course-focus-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; font-size: 1rem; line-height: 1; } .theme-custom-course-focus-btn__icon[hidden] { display: none !important; } /* —— Focus mode layout —— */ html.theme-custom-course-focus-mode .secondary-navigation, body.theme-custom-course-focus-mode .secondary-navigation, html.theme-custom-course-focus-mode .tertiary-navigation, body.theme-custom-course-focus-mode .tertiary-navigation, html.theme-custom-course-focus-mode .drawer-toggles, body.theme-custom-course-focus-mode .drawer-toggles, html.theme-custom-course-focus-mode .drawer-toggler, body.theme-custom-course-focus-mode .drawer-toggler, html.theme-custom-course-focus-mode #region-main-settings-menu, body.theme-custom-course-focus-mode #region-main-settings-menu, html.theme-custom-course-focus-mode .region_main_settings_menu_proxy, body.theme-custom-course-focus-mode .region_main_settings_menu_proxy, html.theme-custom-course-focus-mode .custom-course-index__course-back, body.theme-custom-course-focus-mode .custom-course-index__course-back { display: none !important; } html.theme-custom-course-focus-mode .drawer.drawer-left, html.theme-custom-course-focus-mode .drawer.drawer-right, body.theme-custom-course-focus-mode .drawer.drawer-left, body.theme-custom-course-focus-mode .drawer.drawer-right { visibility: hidden !important; pointer-events: none !important; } html.theme-custom-course-focus-mode #page.drawers, body.theme-custom-course-focus-mode #page.drawers { margin-left: 0 !important; margin-right: 0 !important; } /* limitedwidth / uses-drawers live on , not . */ body.theme-custom-course-focus-mode.limitedwidth #page.drawers .main-inner, body.theme-custom-course-focus-mode.limitedwidth.uses-drawers #page.drawers .main-inner, html.theme-custom-course-focus-mode body.limitedwidth #page.drawers .main-inner, html.theme-custom-course-focus-mode body.limitedwidth.uses-drawers #page.drawers .main-inner, body.theme-custom-course-focus-mode #page.drawers .main-inner, html.theme-custom-course-focus-mode #page.drawers .main-inner { max-width: min(92rem, calc(100vw - 2.5rem)) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.25rem; padding-right: 1.25rem; } body.theme-custom-course-focus-mode.limitedwidth .header-maxwidth, html.theme-custom-course-focus-mode body.limitedwidth .header-maxwidth, body.theme-custom-course-focus-mode .header-maxwidth, html.theme-custom-course-focus-mode .header-maxwidth { max-width: min(92rem, calc(100vw - 2.5rem)) !important; padding-left: 0 !important; padding-right: 0 !important; } /* —— Course breadcrumbs: full-width row, left-aligned with title icon —— */ body.pagelayout-course #page-header.custom-page-header > .w-100, body.pagelayout-incourse #page-header.custom-page-header > .w-100, body.single-section-page #page-header.custom-page-header > .w-100, body.theme-custom-course-page #page-header.custom-page-header > .w-100 { display: flex; flex-direction: column; gap: 0.35rem; } body.pagelayout-course #page-header.custom-page-header > .w-100 > .d-flex.flex-wrap, body.pagelayout-incourse #page-header.custom-page-header > .w-100 > .d-flex.flex-wrap, body.single-section-page #page-header.custom-page-header > .w-100 > .d-flex.flex-wrap, body.theme-custom-course-page #page-header.custom-page-header > .w-100 > .d-flex.flex-wrap { width: 100%; margin: 0; } body.pagelayout-course #page-header #page-navbar, body.pagelayout-incourse #page-header #page-navbar, body.single-section-page #page-header #page-navbar, body.theme-custom-course-page #page-header #page-navbar { flex: 1 1 100%; width: 100%; max-width: 100%; margin: 0; padding: 0; min-width: 0; } body.pagelayout-course #page-header #page-navbar .breadcrumb, body.pagelayout-incourse #page-header #page-navbar .breadcrumb, body.single-section-page #page-header #page-navbar .breadcrumb, body.theme-custom-course-page #page-header #page-navbar .breadcrumb { width: 100%; margin: 0 0 0.35rem; padding: 0; flex-wrap: wrap; } body.pagelayout-course #page-header .custom-page-header__main, body.pagelayout-incourse #page-header .custom-page-header__main, body.single-section-page #page-header .custom-page-header__main, body.theme-custom-course-page #page-header .custom-page-header__main { width: 100%; padding-top: 0; min-height: 3.25rem; align-items: center; } body.pagelayout-course #page-header .page-context-header, body.pagelayout-incourse #page-header .page-context-header, body.single-section-page #page-header .page-context-header, body.theme-custom-course-page #page-header .page-context-header { overflow: visible; min-height: 2.75rem; margin-bottom: 0 !important; align-items: center; } body.theme-custom-course-page #page-header .page-header-headings h2, body.theme-custom-course-page #page-header .page-header-headings .h2 { margin: 0; line-height: 1.25; } body.theme-custom-course-page #page-header.custom-page-header { margin-bottom: 0; padding: 0.75rem 0 0.35rem; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0; } body.theme-custom-course-page .secondary-navigation { margin-top: 0; } html.theme-custom-course-focus-mode #page-content, body.theme-custom-course-focus-mode #page-content { padding-top: 0.25rem; } @media (min-width: 992px) { body.theme-custom-course-focus-mode[class*="theme-custom-drawer-"] #page.drawers, html.theme-custom-course-focus-mode body[class*="theme-custom-drawer-"] #page.drawers { margin-left: 0 !important; margin-right: 0 !important; } } /* On-screen hint while focus mode is active. */ .theme-custom-course-focus-notice { margin: 0 0 1rem; padding: 0.65rem 1rem; border-radius: 0.65rem; background: color-mix(in srgb, var(--theme-custom-nav-accent, #f97316) 12%, var(--bs-body-bg, #fff)); border: 1px solid color-mix(in srgb, var(--theme-custom-nav-accent, #f97316) 28%, transparent); color: var(--bs-body-color, #3f444e); font-size: 0.875rem; font-weight: 500; text-align: center; } html.theme-custom-a11y-dark-mode .theme-custom-course-focus-notice { background: color-mix(in srgb, var(--theme-custom-nav-accent, #f97316) 14%, var(--tc-a11y-surface, #1f2329)); border-color: var(--tc-a11y-border, rgba(255, 255, 255, 0.12)); color: var(--tc-a11y-text, #e8eaed); } @media (min-width: 992px) { html.theme-custom-course-focus-mode #page.drawers.show-drawer-right .theme-custom-footer-floats { right: 2rem; } }