/* /videoer/ on phones (owner, 28 Sep 2026): the site's own tab bar + "Mere" sheet (includes/bb-mobile-nav.php, styled by /assets/css/bb-mobile-nav.css) replace the library header at <=767px, as on every other page. Desktop and tablet keep the library header. Built by tools/build_videoer_nav.py. */ @media (max-width: 767px) { body > [data-shell="header"] { display: none; } /* Without the header the library's .library-frame (added by its app ~2 s after load, margin-top 24px) becomes the first box, and its margin collapsed through : the whole page moved 24px down (CLS +0.03). The 24px now sit on from the first paint and the frame adds none, so nothing moves. */ body { padding-top: 24px; } body > .library-frame { margin-top: 0 !important; /* also beats the landing page's .library-landing .library-frame { margin-top: 12px } */ } /* While the library applies a stored or requested language (its boot script sets data-library-translating and hides its own frame, header and footer), the tab bar waits too, so it does not visibly flip to right-to-left. */ html[data-library-translating] #bb-mobile-nav { visibility: hidden; } /* Room for the fixed tab bar under the last content (the footer). */ body.has-mn-bar { padding-bottom: calc(var(--mn-bar-height, 60px) + 16px); } /* The site tokens the tab bar and sheet read, in px: the library's own root sizes must not scale them. */ #bb-mobile-nav, .mn-fab-group, .mn-more-backdrop, .mn-more-sheet, #langSelectorList.mns-lang { --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 15px; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 650; letter-spacing: normal; } /* Language list behind the sheet's "Sprog" row: the site's language flyout exactly (lp/assets/css/bb-sidebar.css, placed like lang-selector.js does from the sheet; LANGUAGES.md: "must match the homepage exactly"). */ #langSelectorList.mns-lang { position: fixed; z-index: 9010; display: grid; gap: 2px; box-sizing: border-box; max-height: calc(100vh - 24px); overflow-y: auto; padding: 8px; border: 1px solid rgba(212, 199, 184, 0.42); border-radius: 14px; background: #fffefb; box-shadow: 0 8px 32px rgba(58, 47, 38, 0.08), 0 2px 6px rgba(58, 47, 38, 0.04); font-family: var(--font-family); } #langSelectorList.mns-lang[hidden] { display: none; } #langSelectorList.mns-lang .mns-lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: #3a2f26; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: start; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } #langSelectorList.mns-lang .mns-lang-opt:active { background: #fbf8f2; } #langSelectorList.mns-lang .mns-lang-opt:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(74, 122, 104, 0.4); } #langSelectorList.mns-lang .mns-lang-opt.is-active { background: #eef3ef; color: #4a7a68; font-weight: 600; } #langSelectorList.mns-lang .mns-lang-flag { display: block; flex: 0 0 21px; width: 21px; height: 15px; max-width: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); object-fit: cover; } [data-theme="dark"] #langSelectorList.mns-lang { border-color: #3d3a35; background: #2b2a27; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] #langSelectorList.mns-lang .mns-lang-opt { color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] #langSelectorList.mns-lang .mns-lang-opt:active { background: #34322e; } [data-theme="dark"] #langSelectorList.mns-lang .mns-lang-opt.is-active { background: #29362e; color: #7fb3a0; } } @media (max-width: 767px) and (hover: hover) and (pointer: fine) { #langSelectorList.mns-lang .mns-lang-opt:hover { background: #fbf8f2; } [data-theme="dark"] #langSelectorList.mns-lang .mns-lang-opt:hover { background: #34322e; } } @media (min-width: 768px) { #langSelectorList.mns-lang { display: none !important; } }