/* * Apollo Health — site search modal * --------------------------------------------------------------------------- * Companion to css/mega-nav.css and loaded after it. The modal is rendered at * the end of inside its own .ap-shell, so the palette and type tokens * defined on .ap-shell apply here too. Everything is namespaced .ap-sm-*. * * Desktop: a dialog near the top of the screen over a dimmed page. * Phones (< 640px): the dialog fills the screen, like the mobile menu sheet. * * The :where() reset in mega-nav.css covers p, a, lists and buttons but not * form fields, so the input below sets every property Bootstrap or style.css * might otherwise supply. */ /* ------------------------------------------------------------ shell */ .ap-sm { position: fixed; inset: 0; /* Above the sticky header (40), Bootstrap modals (1050) and the promo popup. The Zendesk launcher is hidden separately while the modal is open (body.ap-search-open in mega-nav.css). */ z-index: 1100; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; } .ap-sm[hidden] { display: none; } @media (min-width: 1024px) { .ap-sm { padding-top: 12vh; } } .ap-sm__backdrop { position: absolute; inset: 0; background: rgba(19, 55, 75, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.18s ease; } .ap-sm.is-open .ap-sm__backdrop { opacity: 1; } .ap-sm__dialog { position: relative; display: flex; flex-direction: column; width: 100%; /* A flex item's min-width is its content's, so one unbreakable string in a result would widen the whole dialog past a phone screen. */ min-width: 0; max-width: 680px; max-height: 80vh; max-height: 80dvh; background: var(--ap-paper); border-radius: 14px; box-shadow: var(--ap-shadow); opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity 0.18s ease, transform 0.18s ease; } .ap-sm.is-open .ap-sm__dialog { opacity: 1; transform: none; } /* Visually hidden, still read by screen readers. */ .ap-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ field */ .ap-sm__form { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--ap-rule); } .ap-sm__form .ap-search-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ap-link); } .ap-sm__input { flex: 1 1 auto; min-width: 0; height: auto; /* !important answers style.css, where `form input` sets a 25px bottom margin with !important of its own and would push the field up off the icon's centre line. */ margin: 0 !important; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; font-family: GilroyMedium, sans-serif; font-size: 20px; line-height: 1.3; color: var(--ap-ink); -webkit-appearance: none; appearance: none; } .ap-sm__input::placeholder { color: var(--ap-ink-3); opacity: 1; } .ap-sm__input::-webkit-search-cancel-button, .ap-sm__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .ap-sm__clear { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ap-ink-2); background: var(--ap-rule-soft); transition: background-color 0.15s ease, color 0.15s ease; } .ap-sm__clear[hidden] { display: none; } .ap-sm__clear:hover, .ap-sm__clear:focus-visible { color: var(--ap-brand); background: var(--ap-brand-tint); } .ap-sm__clear svg { width: 14px; height: 14px; } .ap-sm__close { display: flex; flex: 0 0 auto; align-items: center; color: var(--ap-ink-2); transition: color 0.15s ease; } .ap-sm__close:hover, .ap-sm__close:focus-visible { color: var(--ap-brand); } .ap-sm__esc { padding: 3px 7px; border: 1px solid var(--ap-rule); border-radius: 6px; font-family: GilroyMedium, sans-serif; font-size: 12px; line-height: 1; letter-spacing: 0.04em; color: inherit; background: none; } .ap-sm__cancel { display: none; } /* ------------------------------------------------------------ results */ .ap-sm__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 8px 12px; } .ap-sm__gh { padding: 12px 12px 6px; font-family: GilroyBold, sans-serif; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ap-ink-3); } .ap-sm__item { display: grid; /* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its content, so long words would push the row off the right edge. */ grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 12px; border-radius: 10px; color: var(--ap-ink); transition: background-color 0.15s ease; } .ap-sm__item--text { grid-template-columns: minmax(0, 1fr); } .ap-sm__item:hover, .ap-sm__item.is-active { background: var(--ap-brand-pale); } .ap-sm__thumb { grid-row: 1 / 3; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--ap-rule-soft); } .ap-sm__t { display: block; min-width: 0; overflow-wrap: anywhere; font-family: GilroyBold, sans-serif; font-size: 16px; line-height: 1.3; color: var(--ap-brand); transition: color 0.15s ease; } .ap-sm__item:hover .ap-sm__t, .ap-sm__item.is-active .ap-sm__t { color: var(--ap-link); } .ap-sm__d { display: -webkit-box; min-width: 0; overflow-wrap: anywhere; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ap-ink-2); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Before anyone has typed: a few quick links. */ .ap-sm__quick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; font-family: GilroyMedium, sans-serif; font-size: 16px; color: var(--ap-brand); transition: background-color 0.15s ease, color 0.15s ease; } .ap-sm__quick span { color: var(--ap-ink-3); } .ap-sm__quick:hover, .ap-sm__quick:focus-visible { color: var(--ap-link); background: var(--ap-brand-pale); } .ap-sm__none, .ap-sm__error { padding: 28px 16px 20px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ap-ink-2); } .ap-sm__none b { font-family: GilroyBold, sans-serif; font-weight: normal; color: var(--ap-ink); } .ap-sm__none a { font-family: GilroyBold, sans-serif; color: var(--ap-link); } .ap-sm__none a:hover { text-decoration: underline; } /* style.css colours every focused link green (a:focus). Links in here keep their own colour and show focus with a ring instead. */ .ap-sm__quick:focus, .ap-sm__more:focus, .ap-sm__none a:focus { color: var(--ap-link); } .ap-sm__item:focus-visible, .ap-sm__quick:focus-visible, .ap-sm__more:focus-visible { outline: 2px solid var(--ap-link); outline-offset: 2px; } /* ------------------------------------------------------------ footer */ .ap-sm__foot { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--ap-rule); border-radius: 0 0 14px 14px; background: var(--ap-brand-pale); } .ap-sm__foot[hidden] { display: none; } .ap-sm__more { font-family: GilroyBold, sans-serif; font-size: 15px; color: var(--ap-link); } .ap-sm__more:hover, .ap-sm__more:focus-visible { color: var(--ap-link); text-decoration: underline; } .ap-sm__more b { font-weight: inherit; } .ap-sm__keys { font-size: 12px; color: var(--ap-ink-3); white-space: nowrap; } .ap-sm__keys kbd { display: inline-block; min-width: 20px; margin-right: 4px; padding: 1px 5px; border: 1px solid var(--ap-rule); border-radius: 4px; background: #ffffff; font-family: GilroyMedium, sans-serif; font-size: 11px; line-height: 1.4; text-align: center; color: var(--ap-ink-2); } /* ------------------------------------------------------------ phones */ @media (max-width: 639px) { .ap-sm { padding: 0; } .ap-sm__dialog { max-width: none; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; transform: translateY(12px); } .ap-sm__form { padding: 12px 16px; } .ap-sm__input { font-size: 18px; } .ap-sm__esc { display: none; } .ap-sm__cancel { display: inline; font-family: GilroyMedium, sans-serif; font-size: 15px; color: var(--ap-link); } .ap-sm__keys { display: none; } .ap-sm__foot { border-radius: 0; } } @media (prefers-reduced-motion: reduce) { .ap-sm__backdrop, .ap-sm__dialog, .ap-sm__item, .ap-sm__quick { transition: none; } }