/* App-only overrides. The MCOS Capacitor shell (iOS + Android) adds * `mcos-app` to at document-start before the page CSS evaluates; * web browsers never get the class, so every rule below is a no-op for * regular visitors. Add further "hide X inside the app" overrides here. */ /* Trim the in-app site header — the WP header itself stays visible * (brand logo + search). Hide only the elements that have native-app * equivalents or are pure web clutter: * - .open-menu — hamburger menu (native nav lives in the app shell) * - #masthead .prescription-wrap — Kostenkalkulator / Rezept shortcut * - #masthead .banner — top info bar (top_banner_text / * pharmacy_topbar_label), redundant for users already in the app * - #mcos-app-banner — defense-in-depth; the app-promo banner is JS- * gated on !inApp so it shouldn't render here, but this CSS guard * protects against any future regression where the gate fails. */ .mcos-app .open-menu, .mcos-app #masthead .prescription-wrap, .mcos-app #masthead .banner, .mcos-app #mcos-app-banner { display: none !important; } /* In-app back button. mobile-shell.js injects it as a previous sibling * of the (hidden) .open-menu; matching `order: -1` keeps it as the * leftmost flex item in the header — exactly where the hamburger was. * iOS-style chevron uses currentColor so it picks up the header text * colour without us having to track it here. */ .mcos-app .mcos-app-back { order: -1; background: transparent; border: 0; margin: 0; padding: 8px 12px; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; position: relative; -webkit-tap-highlight-color: transparent; } .mcos-app .mcos-app-back:active { opacity: 0.55; } .mcos-app .mcos-app-back__icon { display: block; } /* In-app: pin the search overlay to the top of the (banner-less) header. * custom.js's search-button click handler (assets/js/custom.js, line * ~857) sets inline * #search-container.style.top = $('.banner').outerHeight() + 'px' * on every open/close. That assumes the banner is visible; with the * banner display:none in .mcos-app we want top: 0 unconditionally. * !important overrides the inline style the JS keeps applying. */ .mcos-app #search-container { top: 0 !important; } /* Re-base the .site-content top margin in the app for the now-hidden * #masthead .banner. The marginTopSiteContent mixin (common/_mixins.scss) * reserves space for the full original header (banner + main row), but * the banner's height changes per breakpoint because its text wraps to * more lines on narrower screens (see layout/_header.scss .banner): * * viewport banner mixin in-app margin (mixin − banner) * default (>912) 41px 109 68 * ≤943 41px 134 93 * ≤912 66px 134 68 * ≤501 66px 149 83 * ≤486 91px 149 58 * ≤430 (iPhone) 79px 141 62 * * PR #728 used a flat 41px reduction — correct at desktop, but at iPhone * widths the wrapped banner is ~79px, leaving an unintended ~40px gap. * !important matches the mixin's per-template overrides. */ .mcos-app main.site-content, .mcos-app body .site-content { margin-top: 68px !important; } @media (max-width: 943px) { .mcos-app main.site-content, .mcos-app body .site-content { margin-top: 93px !important; } } @media (max-width: 912px) { .mcos-app main.site-content, .mcos-app body .site-content { margin-top: 68px !important; } } @media (max-width: 501px) { .mcos-app main.site-content, .mcos-app body .site-content { margin-top: 83px !important; } } @media (max-width: 486px) { .mcos-app main.site-content, .mcos-app body .site-content { margin-top: 58px !important; } } @media (max-width: 430px) { .mcos-app main.site-content, .mcos-app body .site-content { margin-top: 62px !important; } } /* Tap-to-expand footer disclaimer. The DOM restructure (heading + * preview paragraph + hidden rest + toggle button) happens in * mobile-shell.js. Defaults to collapsed: first paragraph stays visible * as a preview, the remaining paragraphs reveal on tap. */ .mcos-app .disclaimer .disclaimer-full { display: none; } .mcos-app .disclaimer.expanded .disclaimer-full { display: block; } .mcos-app .disclaimer .disclaimer-toggle { display: inline-block; margin-top: 0.75em; padding: 0.4em 0.9em; background: transparent; border: 1px solid currentColor; border-radius: 4px; color: inherit; font: inherit; cursor: pointer; } .mcos-app .disclaimer .toggle-label-less, .mcos-app .disclaimer.expanded .toggle-label-more { display: none; } .mcos-app .disclaimer.expanded .toggle-label-less { display: inline; } /* Mobile-web app-promo banner. Injected by mobile-shell.js when the * visitor is on a mobile browser AND not inside the Capacitor app. * Dismissible × stores a 7-day cooldown in localStorage. */ #mcos-app-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ffffff; border-top: 1px solid #e5e5e5; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); font-family: inherit; color: #274446; } #mcos-app-banner .mcos-app-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; } #mcos-app-banner .mcos-app-banner__leaf { width: 36px; height: 34px; flex-shrink: 0; } #mcos-app-banner .mcos-app-banner__sub { font-size: 14px; color: #274446; font-weight: 500; line-height: 1.3; } #mcos-app-banner .mcos-app-banner__cta { background: #274446; color: #ffffff; padding: 8px 14px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } #mcos-app-banner .mcos-app-banner__close { background: transparent; border: none; font-size: 24px; line-height: 1; padding: 4px 8px; color: #666; cursor: pointer; flex-shrink: 0; } body.mcos-has-app-banner { padding-bottom: 80px; } /* In-app: lift the back-to-top button above the bottom safe-area / native * UI. Overrides the per-page `.scroll-top { bottom: 48px }` declarations * (common/_general.scss + ~26 pages/*.scss). !important guarantees it wins * on every template regardless of source order or per-page overrides. */ .mcos-app .scroll-top-visible { bottom: 120px !important; } /* In-app: shorten the archive/pharmacy filter sidebar's scroll area so it * fits the app viewport. Overrides the per-template `height: 79vh` set via * 3-chained-ID selectors (e.g. `#archive-wrapper #aside-archive * #aside-archive-pharm-inner`, pages/_archive.scss + siblings). !important * is required because an ID+class selector cannot out-specify three IDs. */ .mcos-app #aside-archive-pharm-inner { height: 76vh !important; } /* In-app, narrow screens (≤640px): cap the doctor-selection modal height * so it fits within the app viewport (native chrome eats vertical space). * Overrides the per-page `.personal-doctor-modal { max-height }` (85vh on * prescription, 65vh on kostenkalkulator). !important is needed because * `.mcos-app .personal-doctor-modal` only ties the page selectors' * specificity (0,2,0), so the cascade order alone wouldn't guarantee a win. */ @media (max-width: 640px) { .mcos-app .personal-doctor-modal { max-height: 81vh !important; } }