/* Play Store install banner — Android only. Deliberately mirrors the iOS Smart App Banner: a compact strip pinned to the top of the viewport, sized so it doesn't eat the article on small screens. */ .grv-android-banner{ position:fixed; top:0; left:0; right:0; z-index:99999; display:flex; align-items:center; gap:12px; padding:8px 12px; box-sizing:border-box; background:rgb(var(--grv-body, 255 255 255)); color:rgb(var(--grv-text, 17 17 17)); border-bottom:1px solid rgba(var(--grv-text, 17 17 17), .12); font-family:inherit; /* keep clear of notches when a site runs viewport-fit=cover */ padding-top:calc(8px + env(safe-area-inset-top, 0px)); } /* [hidden] alone loses to display:flex above */ .grv-android-banner[hidden]{ display:none; } .grv-android-banner__close{ flex:0 0 auto; background:none; border:0; padding:0 4px; margin:0; font-size:22px; line-height:1; cursor:pointer; color:rgba(var(--grv-text, 17 17 17), .5); } .grv-android-banner__icon{ flex:0 0 auto; display:flex; } .grv-android-banner__icon svg{ width:30px; height:30px; display:block; } .grv-android-banner__text{ flex:1 1 auto; min-width:0; /* min-width:0 lets the ellipsis work */ display:flex; flex-direction:column; line-height:1.25; } .grv-android-banner__title, .grv-android-banner__sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .grv-android-banner__title{ font-size:14px; font-weight:700; } .grv-android-banner__sub{ font-size:12px; opacity:.7; } .grv-android-banner__cta{ flex:0 0 auto; padding:6px 14px; border-radius:999px; background:#01875f; /* Google Play green */ color:#fff !important; text-decoration:none !important; font-size:13px; font-weight:700; white-space:nowrap; } /* PUSH THE PAGE DOWN RATHER THAN COVERING IT The banner is position:fixed, so it's out of the flow and would otherwise sit on top of the site. Two things have to move to make room: 1. The document flow — handled by padding-top on . This covers themes whose header is in the normal flow (position:relative), which is the base style in grv-media and so covers the child themes. 2. Anything the theme itself pins to top:0 — a fixed header ignores body padding entirely and would stay under the banner. Those can't be pushed by padding, so we publish the height as a custom property and offset them. --grv-android-banner-h is the single source of truth: the JS overwrites it with the measured height once the banner is visible, so the 56px here is only a pre-measurement fallback. It stays 0px when the banner is absent, which means theme rules can reference it unconditionally without a fallback. */ :root{ --grv-android-banner-h:0px; } html.grv-android-banner-open{ --grv-android-banner-h:56px; } html.grv-android-banner-open body{ padding-top:var(--grv-android-banner-h); } /* Anchor links and scroll-into-view must clear the banner too, or a jump lands the target underneath it. */ html.grv-android-banner-open{ scroll-padding-top:var(--grv-android-banner-h); } /* Themes with a fixed header (grv-sports and grv-media-web pin .header to top:0 and reserve its space with a body:before spacer). Padding can't move a fixed element, so shift it down by the banner height instead. The spacer is in the flow and is already handled by the body padding above. */ html.grv-android-banner-open .header{ top:var(--grv-android-banner-h); } /* Other elements pinned to the top of the viewport. The search overlay is full-height, so it needs its height reduced as well as its top moved, otherwise it overflows the viewport by the banner height. */ html.grv-android-banner-open .search-form{ top:var(--grv-android-banner-h); height:calc(100% - var(--grv-android-banner-h)); } @media (prefers-reduced-motion: no-preference){ .grv-android-banner{ animation:grv-android-banner-in .2s ease-out; } @keyframes grv-android-banner-in{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } } }