/* * Portal mobile/tablet header — student + lead. * * Loaded after student_assets/css/style.bundle.css (Metronic 7). Every rule lives inside * a media query, so the desktop layout (>= 992px) and the mobile layout each get exactly * one set of user controls and never interfere. * * A note on specificity, because it already cost us one round: * Metronic's own `.header-mobile-fixed .topbar` is (0,2,0) and carries * `header-mobile-fixed` on every page. A plain `.topbar` rule here is (0,1,0) and LOSES, * regardless of load order. Anything that must beat it carries an id — hence * `#kt_header .topbar` (1,1,0) below. This is why the controls are now real markup in the * mobile header rather than the desktop .topbar repositioned into it. */ @media (max-width: 991.98px) { /* #kt_header .topbar is the >= 992px instance of the user controls. The mobile header renders its own from the same partial, so this one must not also be on screen. The id is deliberate — see the specificity note above. */ #kt_header .topbar { display: none; } #kt_header_mobile { justify-content: space-between; } /* The theme sets this bar to #025f7fed — the trailing `ed` is an alpha channel, so it is 93% opaque and the page scrolling underneath shows through as legible text. The desktop bar in the same file is a fully opaque #025f7f. Rather than flatten it, frost it: the blur is what makes a translucent bar read as deliberate instead of broken, and it is the treatment the dashboard's own XP badge already uses. */ #kt_header_mobile { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } /* 44px is the minimum comfortable touch target. The old control was Metronic's .burger-icon, whose only content is an absolutely-positioned — it left the button with almost no box and was close to unhittable. */ .portal-mobile-burger, #kt_aside .aside-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #ffffff; } .portal-mobile-burger:hover, .portal-mobile-burger:focus, #kt_aside .aside-close:hover, #kt_aside .aside-close:focus { color: #ffffff; opacity: 0.75; } .portal-mobile-brand { display: inline-flex; align-items: center; margin-left: 6px; } .portal-mobile-brand img { display: block; } /* The mobile instance of the user controls: bell + profile, always visible, sitting in the bar itself rather than behind it. */ .portal-mobile-actions { display: flex; align-items: center; } /* .topbar-item gets its flex layout from a `.topbar` ancestor, which this is not. */ .portal-mobile-actions .topbar-item { display: inline-flex; align-items: center; } .portal-mobile-actions .btn, .portal-mobile-actions a { color: #ffffff; } /* #kt_aside_toggle collapses the sidebar to icons — a desktop affordance. Inside the mobile drawer it only sets `aside-minimize` on , after which the layout's click-to-expand handler intercepts every menu tap (preventDefault plus a 150ms delay before navigating). Hide it and give the drawer a real close button; Metronic already looks for #kt_aside_close_btn via KTOffcanvas closeBy. */ #kt_aside #kt_aside_toggle { display: none; } #kt_aside .aside-close { margin-left: auto; } } @media (min-width: 992px) { /* The drawer does not exist at desktop widths — the aside is permanently docked. */ #kt_aside .aside-close { display: none; } }